css3添加了很多很是适用的属性,此中 3D 属性就就有着很是棒的页面结果,那么动态的3D是如何做出来的呢,这里小编就给大师分享一下本身放动态立体图过渡结果事例;

工具/原料
- 电脑
- Sublime text 2
方式/步骤
- 1
首先看一下小编的页面布局,就是一般的构成立体图的架构,stage 嵌套 container,最后存放六个div,作为立体图的面;

- 2
然后节制一下 stage(舞台)的视距和视点和container(容器)的样式,然后设置为撑持 3D ;
关头代码:-webkit-transform-style:preserve-3d;

- 3
总体节制一下六个div的样式,和在div中的文字样式;
opacity:0.7;节制透明度
position:absolute;定位

- 4
然后我们别离节制每个面的位置和扭转角度,然后以此构成立方体;完当作之后的结果图,如图二;


- 5
然后我们节制一下容器的角度,算是间接的节制了整个 立体图的角度,然后我们可以看到,立体图加倍的真实;(注重 transition 这个属性)


- 6
之后就是节制实现过渡结果,用 :hover 选择器实现鼠标悬停改变样式,图二的结果就可以实现,然后共同 transition 这个属性,添加过渡结果(属性放在了 容器container选择器内)


注重事项
- 小我进修事例,仅作分享;
- 注重浏览器的兼容性;








