6-1二维变形

用来变形的样本

transform: rotate(45deg);
旋转45度

transform: scale(0.7,1.3);
scale(0.7,1.3)水平缩放到0.7倍，垂直缩放到1.3倍

transform: skew(30deg);
skew(30deg)水平扭曲30度

transform: skew(0deg,30deg);
skew(0deg,30deg)垂直扭曲30度

transform: skew(30deg,-15deg);
skew(30deg,-15deg)水平扭曲30度，垂直都扭曲-15度

transform: translate(150px,25px);
translate(150px,25px)水平移动150px,垂直移动25px

顺序不一样导致结果不一样的原因是，旋转后元素的x轴和y轴的方向会跟随元素本身转动，而不是水平和垂直方向了

transform: translate(150px,200px)
        rotate(30deg) scale(1.5);

先平移，在旋转，最后放大

transform: scale(1.5) rotate(30deg)
        translate(150px,200px);

先放大，在旋转，最后平移

transform: rotate(0deg)不旋转

transform: rotate(30deg)以默认中心为基准旋转

transform-origin: left top;
transform: rotate(30deg)

以左上角为基准旋转