transform 属性向元素应用 2D 或 3D 转换。transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
只能转换由盒子模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。

transform属性虽然很多，但是可以分为以下几组：
1、matirx
位移，旋转，偏移，缩放分别使用translate/rotate/skew/scale的方式来控制元素变换，也可以使用matrix。
transform: matrix(a,b,c,d,e,f);
写成向量形式
要做变换时，实质上是乘以一个向量
变换后的坐标为
X = ax + cy + e // 即：x坐标
Y = bx + dy + f // 即：y坐标
X为变换后的水平坐标，Y表示变换后的垂直坐标。
假设中心坐标为（0,0）,
平移为：
transform: matrix(0,0,0,0,50,50);
=
transform: translate(50,50);
缩放
transform: matrix(ax,0,0,by,0,0);
=
transform: scale(a, b);
旋转和偏移也都是可以用matrix表示，但因为计算较繁琐，在此不一一推导。
我们可以看出位移，旋转，偏移，缩放分别使用translate/rotate/skew/scale的方式来控制元素变换，也可以使用matrix。

2、translate、translateX、translateY
平移。
当参数设置为正数时表示正向移动，负数为反向移动，类似于 position:relative + margin；这里注意，y值的设置是可以省略的，与margin、padding 省略值后表示两者值一致不同的是，如果省略了y，则表示y的值为0。例：translate(50px) 同 translate(50px,0) 表示沿x轴向右移动50个像素，y轴不变。
注意：要使用translateZ,必须在父元素上设置perspective。

3、scale、scaleX，scaleY、scaleZ
缩放。等比例缩放。
允许省略y，当省略y时表示x,y等值缩放。如果只想缩放x或y轴，可以使用 scaleX(x), scaleY(y) 。值为 1 表示大小不变。大于1，代表放大，大于0小于1表示缩放，等于0元素消失，小于0，图形反转。
例如：scale(0.3) 等同于 scale(0.3, 0.3)； scaleX(0.3) 等同于 scale(0.3, 1).
当为负值，则缩放元素有反转效果

4、rotate、rotateX、rotateY、rotateZ
旋转。rotate(angle)为角度旋转。但与前平移和缩放不同的是，rotateX, rotateY 和 rotateZ都为rotate3d旋转。
rotate(angle)参数 angle 表示旋转角度，单位为 deg ；当角度为正数时表示顺时针旋转，为负数时表示逆时针旋转

5、skew、skewX、skewY
偏移。skew偏移允许使用一个值，当使用一个值时表示 y-angle 为0；倾斜有一个难点就是它的直角坐标系。
x轴的方向是竖直向下方向的，y轴的方向是水平向右方向的。以逆时针为正角度方向。

7、perspective
表示当前视角的位置；当 translate 值超过视距时，图像就消失了。在测试时，如果需要Z轴的都需要父元素加上这个属性才能有效果。
8、多个函数
transform: translateX(10px) rotate(10deg) translateY(5px)