CSS变形

1、translate平移

注：x轴和y轴的值为正时，表示向右和向下移动

x轴和y轴的值为负数时，表示向左和向上移动

 2、scale 2D缩放

语法： transform:scale{sx,sy}

sx表横向坐标（盒子宽度）  sy 表纵向坐标（盒子高度）

scale后面值只写一个，表示宽高都变化相等的倍数

 ScaleX(sx):表示只设置x轴的缩放

  transform:scale(2,1) = transform:scaleX(2)

transform:scale(1,2) = transform:scaleY(2)

 3、2D倾斜 （单位：deg 表度数）

语法：transform:skew(ax,ay)

x轴值越大，盒子越往左倾斜

y轴值越大，盒子越往下倾斜

当值为0时 不倾斜

Skew的值只写一个的时候只针对x轴发生变化，y不变。

4、2D旋转 rotate（单位：deg 表度数）

语法transform:rotate{ax,ay}

值为负表示为向左旋转