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()

原文地址:https://www.cnblogs.com/yanze/p/7449610.html