CSS实现3D动画有感

开篇小论

最近折腾个人网站的开篇动画，好好学习了一把3D动画制作，当然这个兼容性是坎，看到动画得IE10以上了。原本不想太复杂，但是构思了一下，想要一种开门见山的感觉，所以就想到了要开一扇门，还要走进去，然后出现。结果发现，这些如果不用3D效果，那就是生硬的摩擦感，于是乎就好好研究了一番，发现3d动画也难也简单，难的是实现思路和逻辑，简单的是就那么几个属性控制，所以就先来啰嗦啰嗦属性。

动画属性

众所周知的，CSS3提供的动画元素为首的就是transform，之前还要使用各种前缀，不过经测试，目前已经不需要了，主流通吃，除非要兼容低级别浏览器，且不用3D动画（低级别也看不了）。transform提供了各种变化方式（为了不写太多字，不细分不罗列所有方式了，更多的运用可以查询该属性的介绍）旋转：rotate；移动：translate；缩放：scale等等，这些位置变化是实现动画的关键；

其他常用的如下：

transform-style：这是动画的形式，两个值flat和preserve-3d，前者是默认值平面，也就是没有3d效果，后者是3d效果展示，如果要用3D表现，这个属性是必须启用的，当然注意属性要加各种前缀；

transform-origin：旋转移动围绕的轴线，默认是中心，可以设left,right,top,bottom,也可以设值数值，这样可以调整旋转移动所围绕的轴线，