CSS2D transform 表示 2D 变换，目前获得了各主流浏览器的支持，是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，可以取代大量之前只能靠 Flash 才可以实现的效果。
一、定义移动（translate）
translate() 函数能够重新定位元素的坐标，包含两个参数，分别用来定义 x 轴和 y 轴坐标。
语法格式：
transform:translate(x,y)水平方向和垂直方向同时移动（也就是 X 轴和 Y 轴同时移动） // x、y 可为负值
transform:translateX(x)仅水平方向移动（X 轴移动）
transform:translateY(Y)仅垂直方向移动（Y 轴移动）
Tips：如果是用百分比来表示，则参考的是自己本身。例：transform:translate(-50%,-50%);/* 走的自己盒子的一半 */
二、定义缩放
scale()函数能够缩放元素大小，包含两个参数，分别用来定义宽和高缩放比例。
语法格式：
transform:scale(<number>[,<number>])
- 参数可以是正数、负数和小数；默认值为 1；
- 如果是两个参数，分别对应着宽度和高度，如果有一个参数，则另一个参数同第一个，如果想另外一个不变化，必须写上 1（不缩放）。
- 正数表示基于指定的宽度和高度将放大元素，
- 负数值不会缩小元素，而是翻转元素，然后再缩放元素。（即 负号只是翻转元素，具体的缩放要取决于后面数值是 1 还是小于 1）
- 使用小于 1 的小数可以缩小元素，即缩小到原来的多少倍。
三、定义旋转
rotate() 函数能够旋转指定的元素对象，主要在二维空间进行操作，接收一个角度参数值，用来指定旋转的幅度。
语法格式：
transform:rotate(45deg); // 注意单位是 deg 度数
Tips：正值为顺时针，负值为逆时针；
四、定义变换原点
CSS 变换的原点默认为对象的中心点，如果要改变这个中心点，可以使用 transform-origin 属性进行定义。
语法格式：
transform-origin:属性值 1，属性值 2;
- 属性值初始值为 50%，50%，即元素中心的，适用于块级元素和行内元素；
- 属性值可以是 left、right、center、bottom、top 等描述性关键字；
- 也可以是百分比、em、px 等具体的值；
五、定义倾斜
skew() 函数能够让元素倾斜显示，该函数包含两个参数值，分别用来定义 x 轴 和 y 轴坐标倾斜的角度。
语法格式：
transform:skew(角度值 1,角度值 1); // 注意单位是 deg 度数
- 第一个参数表示相对于 x 轴进行倾斜，第二个参数表示相对于 y 轴进行倾斜；
- 如果省略了第 2 个参数，则第 2 个参数默认值为 0 ；
六、定义矩阵
matix() 是矩阵函数，调用该函数可以非常灵活的实现各种变换效果。
语法格式：
matrix(<number>,<number>,<number>,<number>,<number>,<number>,)
- 第 1 个参数控制 x 轴缩放；
- 第 2 个参数控制 x 轴倾斜；
- 第 3 个参数控制 y 轴倾斜；
- 第 4 个参数控制 y 轴缩放；
- 第 5 个参数控制 x 轴移动；
- 第 6 个参数控制 y 轴移动；
Tips：transform 可以设置多个变换函数来实现更多的特效。
