CSS3 transform
属性定义及使用说明
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
- translate(x,y) 定义 2D 转换
三种情况：
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；
translateX(x)仅水平方向移动（X轴移动）；
translateY(Y)仅垂直方向移动（Y轴移动），
具体使用方法如下
transform:translate(100px,20px);
transform:translateX(100px);
transform:translateY(100px);
- translate3d(x,y,z) 定义 3D 转换
同上类似
- scale() 定义 2D 缩放转换
缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小
三种情况：
scale(x,y) 也就是X轴和Y轴同时缩放
scaleX(x) 元素仅水平方向缩放（X轴缩放）
scaleY(y ) 元素仅垂直方向缩放（Y轴缩放）
使用方法：
transform:scale(2,1.5)
transform:scaleX(2)
transform:scaleY(2)
- scale3d(x,y,z) 定义 3D 缩放转换
同上类似
- rotate(angle) 定义 2D 旋转，在参数中规定角度
transform:rotate(30deg)
正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转
- skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
三种情况：
skew(x,y) X轴和Y轴同时按一定的角度值进行扭曲变形
skewX(x) 仅使元素在水平方向扭曲变形（X轴扭曲变形）
skewY(y) 仅使元素在垂直方向扭曲变形（Y轴扭曲变形）
具体使用如下：（备注我们也可以通过transform-origin来改变元素的基点位置）
transform:skew(30deg,10deg):
transform:skewX(30deg)
transform:skewY(30deg)
- matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵
matrix(<number>, <number>, <number>, <number>, <number>, <number>) ：
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。
就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵 （太复杂，不知道原理）
- transform-origin
transform-origin(X,Y):用来设置元素的运动的基点（参照点）。
默认点是元素的中心点。
其中X和Y的值可以是百分值,em,px，
其中X也可以是字符参数值left,center,right
1、top left | left top 等价于 0 0 | 0% 0%
2、top | top center | center top 等价于 50% 0
3、right top | top right 等价于 100% 0
4、left | left center | center left 等价于 0 50% | 0% 50%
5、center | center center 等价于 50% 50%（默认值）
6、right | right center | center right 等价于 100% 50%
7、bottom left | left bottom 等价于 0 100% | 0% 100%
8、bottom | bottom center | center bottom 等价于 50% 100%
9、bottom right | right bottom 等价于 100% 100%
- rotate3d(x,y,z,angle) 定义 3D 旋转
- rotateX(angle) 定义沿着 X 轴的 3D 旋转 测试
- rotateY(angle) 定义沿着 Y 轴的 3D 旋转
- rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
- perspective(n) 为 3D 转换元素定义透视视图