例
設置旋轉元素的基本佈局：
div
{
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin: 20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
試一試» 定義和用法
變換-origin屬性允許您更改轉化元素的位置。
2D變換可以改變元素的x和y軸。 3D轉換也可以改變的元件的z軸。
為了更好地理解變換origin屬性， 查看演示 。
Note:此屬性必須與使用變換屬性。
Tip:為了更好地理解這個屬性3D變換 ， 觀看演示 。
| 默認值： | 50% 50% 0 |
|---|---|
| 遺傳： | no |
| 動畫： | yes. Read about animatable Try it |
| 版： | CSS3 |
| JavaScript語法： | object .style.transformOrigin="0 0" Try it |
瀏覽器支持
在表中的數字規定，完全支持該屬性的第一個瀏覽器版本。
其次通過數字-webkit-，-moz-，或-O-指定用一個前綴工作的第一個版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -O- |
| transform-origin (three-value syntax) | 36.0 12.0 -webkit- | 10.0 | 16.0 10.0 -moz- | 9 4.0 -webkit- | 23.0 15.0 -webkit- |
CSS語法
transform-origin:x-axis y-axis z-axis|initial|inherit;屬性值
| 屬性值 | 描述 |
|---|---|
| x-axis | 定義了視圖被放置在X軸。 可能的值：
|
| y-axis | 定義了視圖被放置在Y軸。 可能的值：
|
| z-axis | 定義了視圖被放置在z軸(for 3D transformations) 。 可能的值：
|
| 初始 | 將此屬性設置為默認值。 閱讀關於初始 |
| 繼承 | 繼承其父元素此屬性。 閱讀關於繼承 |
相關頁面
CSS教程： CSS 2D變換
CSS教程： CSS 3D變換
HTML DOM參考： transformOrigin property