transform-变形

移动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