css transform常用变化解析

本文旨在对常用变化做最直观的简析

translate 移动

translateX() X轴正方向移动（单位可为px，也可为%，为%时以自身为参照物）

translateY() Y轴反方向移动

translate(x，y)

 

scale 缩放

scaleX() X轴方向拉伸 （参数为数字，缩放比例）

scaleY() Y轴方向拉伸 （参数为数字，缩放比例）

scale(x, y)

 

rotate 旋转

rotateX() 绕X轴由内到外旋转，可以试着用手做一个 “来吧”的动作，就是这个方向（单位为deg，角度） 

rotateY() 绕Y轴由内到外旋转，左手把“来吧”的动作横过来，就是这个方向

rotateZ() 绕Z轴顺时针旋转

 

skew 拉伸

skewX() 拉着自左向右的对角线，X轴方向拉伸（单位为角度，拉伸后倾斜的角度）

skewY() 拉着自左向右的对角线，Y轴方向拉伸

skew()