實(shí)例
設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置：
div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari 和 Chrome */
-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
頁(yè)面底部有更多實(shí)例。
瀏覽器支持
| IE | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|
Internet Explorer 10、Firefox、Opera 支持 transform-origin 屬性。
Internet Explorer 9 支持替代的 -ms-transform-origin 屬性（僅適用于 2D 轉(zhuǎn)換）。
Safari 和 Chrome 支持替代的 -webkit-transform-origin 屬性（3D 和 2D 轉(zhuǎn)換）。
Opera 只支持 2D 轉(zhuǎn)換。
定義和用法
transform-origin 屬性允許您改變被轉(zhuǎn)換元素的位置。
2D 轉(zhuǎn)換元素能夠改變?cè)?x 和 y 軸。3D 轉(zhuǎn)換元素還能改變其 Z 軸。
為了更好地理解 transform-origin 屬性，請(qǐng)查看這個(gè)演示。
Safari/Chrome 用戶：為了更好地理解 transform-origin 屬性用于 3D 轉(zhuǎn)換的情況，請(qǐng)查看這個(gè)演示。
注釋：該屬性必須與 transform 屬性一同使用。
| 默認(rèn)值： | 50% 50% 0 |
|---|---|
| 繼承性： | no |
| 版本： | CSS3 |
| JavaScript 語(yǔ)法： | object.style.transformOrigin="20% 40%" |
語(yǔ)法
transform-origin: x-axis y-axis z-axis;
| 值 | 描述 |
|---|---|
| x-axis |
定義視圖被置于 X 軸的何處?？赡艿闹担?/p>
|
| y-axis |
定義視圖被置于 Y 軸的何處?？赡艿闹担?/p>
|
| z-axis |
定義視圖被置于 Z 軸的何處?？赡艿闹担?/p>
|
更多建議：