transform 2D变换［位移、缩放、旋转、倾斜］
A . 位移:translate()

使用方法:

transform : translate(50px,50px);

描述:把元素从原来的位置移动，而不影响文档流，和relative比较类似 


transform: translate(150px,170px);
transform: translate(-150px,-170px);
translateX() === translate(x)
translateY() === translate(0,y)
B . 缩放:scale()

使用方法:

transform : scale(0.1,0.2);

描述:让元素根据中心原点对对象进行缩放;默认的值1。小于1缩小，大于1放大。如果只有一个值时，其第二个值默认与第一个值相等。负值则为对称. 

transform: scale(2);
transform: scale(0.2,0.5);

transform: scale(-2);
transform: scale(-0.2,-0.5);
C . 旋转rotate()

使用方法:

transform : rotate(60deg);

描述:旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。 

transform: rotate(60deg) scale(2);
transform: rotate(-60deg);

transform: rotate(70deg);
transform-origin: 0 0;

transform: rotate(70deg);
transform-origin: bottom right;
D . 倾斜skew()

使用方法:

transform : skew(60deg，30deg);

描述:让元素倾斜显示；它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状 

transform : skew(60deg);
transform: skew(0deg,-60deg);

transform: skew(60deg);
transform-origin:  0 0;

transform: skew(60deg);
transform-origin:  bottom right;
E . 变换矩阵matrix()

使用方法:

transform : matrix(a,b,c,d,e,f);



平移:transform: matrix(1, 0, 0, 1, 30, 30);
缩放:transform: matrix(sx, 0, 0, sy, 0, 0);
旋转:transform: matrix(cosθ,sinθ,-sinθ,cosθ,0,0);
斜切:transform: matrix(1,tan(θy),tan(θx),1,0,0);/*θy为和Y轴夹角，θx为和X轴夹角*/

-->