2D 转换
首先要了解2D-transform的坐标系统
设置旋转中心点
transform-origin：bottom center
- translate()--平移
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform: translate(50px,100px);
- rotate()--旋转
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform: rotate(30deg);
- scale()--缩放
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数;
transform: scale(2,3);
- skew()--倾斜
语法
transform:skew(<angle> ,<angle>);
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
- skewX(<angle>);表示只在X轴(水平方向)倾斜。
- skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
- matrix()
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
重头戏来了
transform: matrix(a,b,c,d,e,f);
实际上，这6参数，对应的矩阵就是：
转换公式：
matrix的偏移
transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */
假设矩阵中心点为(x,y)=(0,0)，变换后：
x坐标就是ax+cy+e = 10+00+30 =30
y坐标就是bx+dy+f = 00+10+30 =30
也就是说偏移只与后面两个参数有关
注意：这里面e，f参数的单位可以省略
matrix中的缩放
transform: matrix(s, 0, 0, s, 0, 0);
x' = ax+cy+e = sx+0y+0 = sx;
y' = bx+dy+f = 0x+sy+0 = sy;
matrix中的旋转
transform： matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
x' = xcosθ-ysinθ+0 = xcosθ-ysinθ
y' = xsinθ+ycosθ+0 = xsinθ+ycosθ
matrix中的拉伸
matrix(1,tan(θy),tan(θx),1,0,0)
x' = x+ytan(θx)+0 = x+ytan(θx)
y' = xtan(θy)+y+0 = xtan(θy)+y
