细说css3的动画（2）transform属性
首先介绍一下transform是干什么的，下面这段话节选自W3CSchool：
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
而transform只是单纯的图形操作，所以要和animation属性连起来用才能设计出各种各样的动画效果。
语法
transform: none|transform-functions;
| 值 | 描述 | 测试 |
|---|---|---|
| none | 定义不进行转换。 | 测试 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 | 测试 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 | |
| translate(x,y) | 定义 2D 转换。 | 测试 |
| translate3d(x,y,z) | 定义 3D 转换。 | |
| translateX(x) | 定义转换，只是用 X 轴的值。 | 测试 |
| translateY(y) | 定义转换，只是用 Y 轴的值。 | 测试 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 | |
| scale(x,y) | 定义 2D 缩放转换。 | 测试 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 | |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 | 测试 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 | 测试 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 | |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 | 测试 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 | |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 | 测试 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 | 测试 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 | 测试 |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 | 测试 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 | 测试 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 | 测试 |
| perspective(n) | 为 3D 转换元素定义透视视图。 | 测试 |
http://www.w3school.com.cn/cssref/pr_transform.asp
我把w3cschool中的api粘过来了，从上面的表格来看，transform函数总共有以下几类：
（1）矩阵变换：matrix、matrix3d
（2）位置改变：translate、translate3d、translateX、translateY、translateZ
（3）缩放：scale、scale3d、scaleX、scaleY、scaleZ
（4）旋转：rotate、rotate3d、rotateX、rotateY、rotateZ
（5）2D倾斜：skew、skewX、skewY
（6）3D透视：perspective
由于矩阵会涉及一些数学概念，我先从第二个开始解释。
（下面的例子，我先举2D的例子，3D下面我会通过做一个3D模型来详细说明）
1、位置改变
translate：以2D的方式改变元素位置
translate3d：以3D的方式改变元素位置
translateX：单独改变x轴坐标的位置，其他轴位置不变
translateY：单独改变y轴坐标的位置，其他轴位置不变
translateZ：单独改变z轴坐标的位置，其他轴位置不变（只有3D才有z轴）
2D位置变换：translate(x,y)，演示如下：
代码如下：
2、缩放
scale：2D缩放
scale3d：3D缩放
scaleX：只在x轴方向缩放
scaleY：只在y轴方向缩放
scaleZ：只在z轴方向缩放（只有3D有z轴）
2D缩放：scale(x,y)、scaleX(x)、scaleY(y)，演示如下
代码如下：
3、旋转：
rotate：2D旋转
rotate3d：3D自由旋转
rotateX：延x轴旋转（3D旋转）
rotateY：延y轴旋转（3D旋转）
rotateZ：延z轴旋转（3D旋转）
2D旋转：rotate(angle)，参数为旋转角度，演示如下：
代码如下：
注意：角度的单位用deg，如果不加就没有效果了。
4、2D倾斜
skew：2D倾斜
skewX：2D延x轴倾斜
skewY：2D延y轴倾斜
2D倾斜：skew(x-angle,y-angle)、skewX(angle)、skewY(angle)，演示如下：
代码如下：
解释：延x轴和y轴倾斜比较好理解，而延x和y轴双轴倾斜，相当于一个3D空间倾斜轴线，而这个两个角度分别是这条轴线与x面和y面的角度，而倾斜沿着这条轴线进行倾斜。
如果多个函数同时使用，用空格隔开就行，如：transform: rotateX(30deg) translateX(30px);
