知识点：
CSS3 Transform
CSS3 2D转换
CSS3 3D转换
CSS3 Transform与坐标系统
CSS3 矩阵
CSS3 扩展属性
一、CSS3 Transform
CSS3的变形（Transform）属性
让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素。
【语法】
transform：none | [ ]*;
【默认值】
transform:none;
【兼容性】
IE12+、FireFox16+、chrome36+、Safari16+、Opera23+
二、CSS3 2D转换
CSS3 rotate()
CSS3 translate()
CSS3 scale()
CSS3 skew()
CSS3 matrix()
1.旋转rotate
通过制定的角度参数对原元素制定一个2D rotate（2D旋转）。
【语法】
transform:rotate();
【参数说明】
angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转。
rotate案例：
rotate
2D转换
2D转换
2D转换
2D转换
2D转换
2D转换
2.移动translate
translate()方法，根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。
【三种情况】
translateX(x)仅水平方向移动（X轴移动）;
translateY(Y)仅垂直方向移动（Y轴移动）;
translate(x, y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。
1).translateX()
通过给定一个X方向上的数目指定一个translation。
【语法】
transform:translateX();
2).transform:translateY();
通过给定一个Y方向上的数目指定一个translation。
【语法】
transform:translateY();
【备注】
deg是角度；
translate-value必须是准确的数值，top类方向词无效果；
X轴的正方向是从左到右，Y轴正方向是从上到下。
3).translate([, ])
通过矢量[tx, ty]指定一个2D translation, tx是第一个过渡值参数, ty是第二个过渡值参数选项。
【语法】
transform: translate([, ])
translate案例
translate
【备注】：
第一个是X的值，第二个Y的值可以省略，默认值为0。
3.缩放scale
scale()方法，指定对象的2D scale（2D缩放）。
【三种情况】
scaleX(x)元素仅水平方向缩放（X轴缩放）;
scaleY(y)元素仅垂直方向缩放（Y轴缩放）;
scale(x, y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）。
1).scaleX()
使用[sx, 1] 缩放矢量执行缩放操作，sx为所需参数。
【语法】
transform: scaleX();
scaleX案例：
scaleX
2).scaleY()
使用[sy, 1] 缩放矢量执行缩放操作，sy为所需参数。
【语法】
transform: scaleY();
scaleY案例
scaleX
3).scale([, ])
提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale（2D缩放）。
【语法】
transform: scale([, ]);
【备注】
以中心缩放；
1是正常大小，小于1是缩小，大于1是放大；不需要单位。
注意：第二个参数省略了并非是0 ，而是等同第一个参数。即等比例，不变形。
4.扭曲skew
skew()方法，指定对象skew transformation（斜切扭曲）。
【三种情况】
skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）;
skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）;
skew(x, y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）。
1).skewX()
按给定的角度沿X轴指定一个skew transformation（斜切变换）。
【语法】
transform: skewX();
skewX案例：
skewX
2).skewY()
按给定的角度沿Y轴指定一个skew transformation（斜切变换）。
【语法】
transform: skewY();
skewY案例
skewY
【备注】：
skewX
正值：逆时针
负值：顺时针
skewY
正值：顺时针
负值：逆时针
其中180deg 和0deg 效果一样
3).skew( [, ])
X轴Y轴上的skew transformation（斜切变换）。第一个参数对应X轴，第二个参数对应Y轴。
【语法】
transform: skew( [, ]);
skew( [, ])案例
skew
备注：
第二个参数可以省略，当只有一个参数时，默认值是0.
5.矩阵matrix
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换。
相当于直接应用一个[a,b,c,d,e,f]变换矩阵。
【语法】
transform: matrix(a, c, b, d, tx, ty);
【参数说明】
tx, ty就是就是基于X和Y坐标重新定位元素。