优点
无论什么类型的转换完全不会影响其它的布局结构，
对行内标签没有效果
2D坐标
x向右为正，y向下为正
位移translate
移动语法
语法1：
transform:translate(x,y);
transform:translate(50%,30%);
transform:translate(200px,150px);
这里的百分比是相对于元素自身的长度
语法2：
transform:translateX(30px);
transform:translateY(30px);
旋转rotate
旋转中心transform-origin
首先默认的旋转中心是元素的中心
所以默认值是
transform-origin：50% 50%
这里的值可以是px,%,还有几个默认方位词top bottom left right center
比如设置左上为中心
transform-origin:left top;
语法
transform:rotate(90deg)
deg表示度，正数是顺时针，负数反之
缩放scale
重心设置和上面一样
语法
transform:scale(2,2);
transform:scale(2);
里面的数值是x,y 的倍数，这真的没啥好讲的、
扭曲skew
skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。
这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。
transform:skew(30deg,30deg);
transform:skewX(30deg);
transform:skewY(45deg);
这3种都可以
综合写法
transform: translate(150px,150px) rotate(360deg) scale(1.5);
唯一需要注意的是：必须位移放在第一个，不然失效
