一、transform-origin屬性介紹
transform-origin屬性表示在對元素進行變換的時候，設置圍繞哪個點進行變化的。默認情況，變換的原點在元素的中心點，即是元素X軸和Y軸的50%處，如下圖所示：
我們沒有使用transform-origin改變元素原點位置的情況下，CSS變換進行的旋轉、移位、縮放等操作都是以元素自己中心（變換原點）位置進行變換的。但很多時候需要在不同的位置對元素進行變換操作，我們就可以使用transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。
用法：transform-origin: x-axis y-axis z-axis;
transform-origin屬性可以使用一個，兩個或三個值來指定，其中每個值都表示一個偏移量。 沒有明確定義的偏移將重置為其對應的初始值。
一個值：
必須是 <length><percentage>，或 left, center, right, top, bottom關鍵字中的一個。
兩個值：
其中一個必須是<length><percentage>，或left, center, right關鍵字中的一個。
另一個必須是<length><percentage>，或top, center, bottom關鍵字中的一個。
三個值：
前兩個值和只有兩個值時的用法相同。
第三個值必須是<length>。它始終代表Z軸偏移量。
二、值
- x-offset
-
定義變形中心距離盒模型的左側的
<length>或<percentage>偏移值。 - offset-keyword
-
left，right，top，bottom或center中之一，定義相對應的變形中心偏移。 - y-offset
-
定義變形中心距離盒模型的頂的
<length>或<percentage>偏移值。 - x-offset-keyword
-
left，right或center中之一，定義相對應的變形中心偏移。 - y-offset-keyword
-
top，bottom或center中之一，定義相對應的變形中心偏移。 - z-offset
-
定義變形中心距離用戶視線（z=0處）的
<length>（不能是<percentage>）偏移值。
關鍵字是方便的簡寫方法，等同於以下<percentage>值：
三、實例
1、以rotate()為例，設置不同的transform-origin，觀察效果：
transform-origin取值為center（或center center或50% 或50% 50%或默認）：
transform-origin取值為top（或top center或center top或50％ 0）：
transform-origin取值為right(或right center 或center right 或 100％ 或 100％ 50％)：
transform-origin取值為bottom(或bottom center 或center bottom 或 50％ 100％)：
transform-origin取值為left(或left center或center left或0或0 50％):
transform-origin取值為top left(或left top或0 0)：
transform-origin取值為right top（或top right或100％ 0）：
transform-origin取值為bottom right（或right bottom或100％ 100％）:
transform-origin取值為left bottom（或bottom left 或 0 100％）:
注意：CSS3變形中重置元素的原點，位移translate()不受影響。
2、將transform-origin從中心點重置后，rotate()、skew()、scale()之間的效果：
rotate()：
skew()：
scale():
四、Code ： transform & transform-origin
