这次总结css3的3D变形的问题,直接上图

屏幕快照 2016-04-08 下午9.59.23.png

屏幕快照 2016-04-08 下午10.00.43.png

屏幕快照 2016-04-08 下午10.01.44.png

屏幕快照 2016-04-08 下午10.02.56.png

屏幕快照 2016-04-08 下午10.04.26.png

这个主要是讲一个3D的效果,结果就是6个div1组成了一个(300px X 300px)的正方体,然后在鼠标移上去的时候,这个正方体进行旋转. 然后里面有6个小的div组成的(150px X 150px)正方体,也已同样的方式进行旋转.

这里讲一下,主要是transform-style: preserve-3d;这是开启3D效果的一个命令.还有一点就是div1和div都是被包含在section里面的.其余的就是2D的变形了.这个还可以加入动画效果.让其自动旋转.今天就到这里了.明天继续.