transform

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

1、變形原點

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

2、旋轉rotate

transform:rotate(30deg)

---

3、移動translate

transform:translate(100px 20px)

---

4、縮放scale

transform:scale(2,1.5)

---

5、扭曲skew

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