transform-origin

transform-origin能夠改變一個元素（塊級元素與部分行內元素）變形的原點。該屬性必須配合transform屬性使用。

 山大

 

/* 單值語法 */
transform-origin: 2px;
transform-origin: bottom;

/* 雙值語法 */
/* 用兩個數字值先水平後垂直，用一個數值一關鍵字或兩關鍵字不強求順序 */
transform-origin: 3cm 2px;   /* x-offset y-offset */
transform-origin: 2px left;  /* y-offset x-offset-keyword */
transform-origin: left 2px;  /* x-offset-keyword y-offset */
transform-origin: right top; /* x-offset-keyword y-offset-keyword */
transform-origin: top right; /* y-offset-keyword x-offset-keyword */

/* 三值語法 */
transform-origin: 2px 30% 10px;     /* x-offset y-offset z-offset */
transform-origin: 2px left 10px;    /* y-offset x-offset-keyword z-offset */
transform-origin: left 5px -3px;    /* x-offset-keyword y-offset z-offset */
transform-origin: right bottom 2cm; /* x-offset-keyword y-offset-keyword z-offset */
transform-origin: bottom right 2cm; /* y-offset-keyword x-offset-keyword z-offset */　　

舉例：

rotate()的transform-origin 是旋轉的中心點 (這個屬性的應用原理是先用這個屬性的負值translate該元素，進行變形，而後再用這個屬性的值把元素translate回去)。

下圖中黑色方框爲未進行旋轉處理的原圖，紅色方框爲旋轉後的方框。以原圖爲對比來觀察translate-origin屬性是如何使用的。

transform-origin: 0 0;即旋轉原點爲原圖片的原點（方形的左上角點）

transform-origin: top right; // 原點爲方框的右上角

transform-origin: left 100%; / transform-origin: left 200px; // 原點爲方框的左下角

也就是說先以方框left邊界爲y軸，再將原點沿着y軸向下偏移200px。