css3动态立体图过渡效果事例

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选择器内）