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选择器内）
注重事项
- 小我进修事例，仅作分享；
- 注重浏览器的兼容性；
