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 屬性範例
<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>
範例的輸出效果#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 其他的效果上，例如改變傾斜的基準點。
延伸閱讀