transform 2D变形
通过CSS转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法：translate()/rotate()/scale()/skew()/matrix()。
·none 定义不进行转换。
·translate(x,y) 定义2D平移转换。
·translateY(y) 定义转换，只是用Y轴的值。
·translateZ(z) 定义3D转换，只是用Z轴的值。
·scale(x,y) 定义2D缩放转换。
·scaleX(X) 通过设置X轴的值来定义缩放转换。
·scaleY(Y) 通过设置Y轴的值来定义缩放转换。
·rotate(angel) 定义2D旋转，在参数中规定角度。
·rotateX(angel) 定义沿着X轴的3D旋转。
·rotateY(angel) 定义沿着Y轴的3D旋转。
·skew(x-angle,y-angle) 沿着X轴和Y轴的2D倾斜转换。
·skewX(angle) 定义沿着X轴的2D倾斜转换。
·skewY(angle) 定义沿着Y轴的2D倾斜转换。
·matrix 定义使用6个值的矩阵。
·transform-origin：改变元素变形的基准点。
·像素/百分比
·X轴：left/right/center
·Y轴：top/bottom/center
如：平移：transform:translate(50px,40px);
缩放：transform:scale(0.6); //变为原来的60%
旋转：transform:rotate(45deg); //设置角度为45度，也可以是弧度，如：0.3rad
倾斜：transform:skewX(30deg);
transform:skew(30deg,45deg);
矩阵：transform:matrix(1,0,0,1,50,0);
改变基准点：transform-origin:left top;或transform-origin:0 0;或
transform-origin:30% 30%; 连用：transform:rotate(45deg);