一、2D动画
1.1 重要的css属性
1.1.1 transform属性
transform属性可使元素旋转、缩放、倾斜或平移。其中平移、缩放、旋转还有其他参数实现3D效果，2D形变暂时不讨论。
由以下四个变换函数实现：
1.平移：translate(x,y)
2.缩放：scale(x,y)
3.旋转：rotate(deg)
4.倾斜：skew(deg,deg)
1.1.2 transform-orgin属性
css每个元素都有一个坐标系,其原点位于元素左上角；但使用transform时，坐标系的原点默认会移动到元素的中心，可以通过改变transform-orgin属性来设置形变的中心点。默认值：(50%,50%,0)
1.1.3 transform属性中变换函数的每一次使用都会改变坐标系
transform属性中变换函数的每一次使用都会改变坐标系，因此变换函数的顺序很重要,不同的顺序会导致不同的结果。
二、3D动画
2.1 transform3D属性-变换函数
在2D形变的基础上延伸出3D动画，由以下3个变换函数实现:
1.平移：复合属性 translate3d(x,y,z)；单个属性 translateX(x)、...
2.缩放：复合属性 scale3d(x,y,z)；单个属性：scaleX(x)
3.旋转：复合属性 rotate3d(x,y,z,a)；单个属性：rotateX(x)
2.2 透视属性- perspective
2.2.1 概念
指定了观察者与 z=0 平面的距离（默认值），使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定，总而言之透视利用的就是近大远小原理。
2.2.2 透视的使用方式
2.2.2.1 在父元素定义CSS透视属性
2.2.2.2 在元素中使用transform属性中的perspective函数
2.3 创建3D空间transform-style属性
CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中，初始值flat。
