移动translate
translateX 在x轴上面位移或者变形,大写X
translateY 在Y轴上面位移或者变形,大写Y
translate(x,y) 在x轴和Y轴位移或者变形,当我们只设置一个值的时候，只有x轴生效
image.png
缩放scale
scaleX 设置元素在X轴方向缩放比例
scaleY 设置元素在Y轴方向缩放比例
scale(x,y) 设置元素在x,y轴方向缩放比例，可以设置一个值，表示x和y,可以设置负数，使用场景，设置小于12px的字体
image.png
旋转rotate
rotate() 旋转
单位是deg 偏转角度
X轴方向是前后偏移
Y轴方向是左右偏移
不设置xy时，以中心点绕着Z轴在水平面旋转
image.png
扭曲skew
skewX 绕X轴发生倾斜 （X轴逆时针为正）
skewY 绕Y轴发生倾斜 （Y轴顺时针为正）
skew(x , y)
image.png
transform-origin:改变元素基点
它的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置，因为我们元素默认基点就是其中心位置，换句 我们没有
使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix 等操作都是以元
素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作，那么我们就 可以使用transform-origin来对元素进行
基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。
transform-origin:50%;
left center right
top center bottom
transform-origin 在x轴和Y轴位移或者变形,当我们只设置一个值的时候，只有x轴生效
注意：提醒大家一点的是，transform-origin并不是transform中的属性值，他具有自己的语法
image.png
