CSS3 transform-origin 屬性是用來改變其旋轉基礎點的位置

CSS3 transform-origin 是個用來與 transform 搭配的屬性，可以用來定義＂有設定 transform 屬性的網頁元素＂的旋轉基礎點位置，另外一種說法是用來改變其旋轉基礎點的位置，因為 transform 屬性預設的旋轉基礎點位置並不一定能滿足設計師的要求，所以 CSS3 推出了transform-origin 屬性來搭配，讓網頁設計師能夠輕易的調整要在哪個地方旋轉，為了要達到這樣的功能，所以 CSS3 transform-origin 屬性可以設定 X 軸、Y 軸的旋轉位置，甚至連 Z 軸的旋轉位置都能設定，換言之，CSS3 transform-origin 屬性可以處理 2D 與 3D 的效果。

CSS3 transform-origin 屬性語法

transform-origin: x軸 y軸 z軸;

請注意 transform-origin 屬性參數的順序，由左而右分別是 X 軸、Y 軸以及 Z 軸，可以設定的參數列舉於下：

• X 軸方向可以設定：left, center, right, 長度或百分比。
• Y 軸方向可以設定：left, center, right, 長度或百分比。
• Z 軸方向僅可設定長度。
  

接著我們將 CSS3 transform-origin 屬性套用到範例中看效果。

CSS3 transform-origin 屬性範例

<style type="text/css">
#test_skew_0{
    width:300px;
    height:50px;
    background-color:yellow;
    margin-bottom:22px;
}   
#test_skew_1{
    width:300px;
    height:50px;
    background-color:red;
    -moz-transform:rotate(13deg);
    -moz-transform-origin:24% 30%;
    -webkit-transform:rotate(13deg);
    -webkit-transform-origin:24% 30%;
    -o-transform:rotate(13deg);
    -o-transform-origin:24% 30%;
    -ms-transform:rotate(13deg);
    -ms-transform-origin:24% 30%;
    transform:rotate(13deg);
    transform-origin:24% 30%;
} 
#test_skew_2{
    width:300px;
    height:50px;
    background-color:blue;
    -moz-transform:rotate(13deg);
    -moz-transform-origin:60% 350%;
    -webkit-transform:rotate(13deg);
    -webkit-transform-origin:60% 350%;
    -o-transform:rotate(13deg);
    -o-transform-origin:60% 350%;
    -ms-transform:rotate(13deg);
    -ms-transform-origin:60% 350%;
    transform:rotate(13deg);
    transform-origin:60% 350%;
}
</style>
<div id="test_skew_0">原始不傾斜區塊</div>
<div id="test_skew_1">第一個傾斜區塊</div>
<div id="test_skew_2">第二個傾斜區塊</div>

範例的輸出效果

原始不旋轉區塊

第一個旋轉區塊

第二個旋轉區塊

看到實際的效果是不是覺得很有趣呢？原本不會旋轉的 DIV 區塊，透過 transform 做出旋轉效果後，再用 transform-origin 屬性的搭配，來改變預設的旋轉基準點，創造出兩個 DIV 區塊重疊的效果，同樣的手法也可以用在 transform 其他的效果上，例如改變傾斜的基準點。