CSS动画笔记

坐标系：右，下，向屏幕外面，分别是x,y,z的正方向。

平滑过渡动画：transition,从一个属性值平滑过渡到另一个属性值.

transition：属性名称 动画时间

多个属性的过渡效果

3D 相当于通过一个窗口观察，需要告诉浏览器--我们的观察位置和观察的物体和我们的距离。

• 观察的物体离我们的距离-- perspective 属性（800）
• 观察的窗口的位置--perspective-origin 属性（50% 50%）

transform 属性：
transform 同样适用于 2D ，所以，为了告诉浏览器，我们是3D 场景，需要添加： transform-style：webkit-preserve-3d

1. translate(位移)：

   • translateX (x px)
   • translateY (y px)
   • translateZ (z px)

2. rotate（旋转）:

   • rotateX (x deg)
   • rotateY (y deg)
   • rotateZ (z deg)

3. transform-origin：旋转中心

   • x轴：left，center，right；
   • y轴：top，center，bottom；
   • z轴：length px