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

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

0节制立体图动弹

15用在网页中完当作立体图

东西/原料

• 电脑
• Sublime text 2

方式/步调

1. 1

   起首看一下小编的页面布局，就是一般的构成立体图的架构，stage 嵌套 container，最后存放六个div，作为立体图的面；

   
2. 2

   然后节制一下 stage（舞台）的视距和视点和container（容器)的样式，然后设置为撑持 3D ；

   关头代码：-webkit-transform-style：preserve-3d；

   
3. 3

   总体节制一下六个div的样式，和在div中的文字样式；

   opacity：0.7；节制透明度

   position：absolute；定位

   
4. 4

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

   
5. 5

   然后我们节制一下容器的角度，算是间接的节制了整个 立体图的角度，然后我们可以看到，立体图加倍的真实；（注重 transition 这个属性）

   
6. 6

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

   

注重事项

• 小我进修事例，仅作分享；
• 注重浏览器的兼容性；