transform

参考：https://blog.csdn.net/qq_2418...

一、变形原点

transform-origin(X,Y)变形原点，默认值为中心位置
（-webkit-,-moz-,-o-）
x,y的值可以为百分值，em,px
x → left,center,right
y → top,center,bottom

• top left|left top ==> 0 0
• top|top center| center top ==>50% 0
• left|left center|center left ==>0 50%
• center| center center ==>50% 50%(默认值)
• right|right center|center right ==>100% 50%
• bottom|bottom center|center bottom ==>50% 100%
• bottom left|left bottom ==>0 100%
• bottom right|right bottom ==>100% 100%

  transform-origin(25%,75%)

二、旋转rotate

transform:rotate(30deg)

---

三、移动translate

transform:translate(100px 20px)

---

四、缩放scale

transform:scale(2,1.5)

---

五、扭曲skew

transform:skew(30deg,10deg)
基点：transform-origin(50%，50%)默认值