css3 3d动画学习心得

引言

本文阐述了自己学习css3做3d动画的心得：并非用了rotateX、rotateY做旋转效果就一定是3d，实现一个3d效果需要理清一些概念，然后多个属性共同配合。

Demo

效果：

3张图片围成个三角形，鼠标移上去，3个图片就会旋转。 

代码：

注：如果用更多图片来围圈效果会更炫些，不过为了突出原理，只用了3张且代码没有做兼容，只能在chrome等webkit浏览器下看效果。代码中没有js,纯css。无需js参与的纯样式动画，这应该也是css3动画的魅力之一了。

demo原理

1、构建一个3d的静态和动态环境：perspective、transform-style:preserve-3d 

2、3张图片绝对定位，保证原点相同：position:absolute 

3、分别绕y轴旋转120,240,360度，摆好方向：rotateY 

4、分别各自向自己的前方位移80px，拉开距离：translateZ 

5、旋转3张图片共同的容器wrap，3张图片旋转：rotateY 

css3的2d动画，从原理上讲，还是比较简单的，但是3d就要捋一捋了。

1、perspective

此属性定义了透视的距离，让其子元素具有透视效果，也就是让子元素看起来“近大远小” 

刚刚的效果，鼠标不去交互的的时候，效果如下：

去掉正前面一张（此时有perspective属性：-webkit-perspective:800px;），效果：

可以看到200*100的矩形图变成了躺着的“梯形”，有“近大远小”的效果。如果去掉perspective属性：

左右2张图片还是绕y轴旋转，但是没有了“近大远小”的“透视效果”，原来是矩形，旋转后还是矩形。距离视野较远的边 和较近的边一样长

perspective的值是怎么定的？

perspective是有值的，它代表了你的视野距离角色的距离。demo中颜色最深的矩形，从原点向正前方位移了80px（ -webkit-transform: rotateY(360deg) translateZ(80px);），此时如果perspective的值小于80px比如79px,效果如下： 

正前方一张没有了，为什么呢？

这里设想有一个摄像头，摄像头距离物体的距离（perspective）和角度(perspective-origin)，决定了你所看到的。因为摄像头伸到正前面深色矩形的后面，伸到3个图片围成的圈子里面了，自然看不到深色矩形，只能看到里面。就好像你在门外可以看到整所房子，可是你已进入房子，进门的那面墙就到你身后，就看不到那面墙。原则上这里perspective值只要超过80px我们就可以看到整体了，但是实际我们可以根据需求，继续调整为自己想要的感觉。

2、transform-style

transform-style:preserve-3d让正在动画状态的元素保留其3d效果 

有它时：

没有transform-style:preserve-3d：

不管是怎么旋转和变形，有了perspective和transform-style:preserve-3d才是3d效果，否则都是2d的，perspective是3d总负责，transform-style:preserve-3d负责动画状态下的3d。如果要更精细的控制3d效果，还可配合使用perspective-origin、backface-visibility等属性，不过只要掌握了原理应该都不再是难题。

来源：前端观察