實例

設(shè)置旋轉(zhuǎ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 */
}

親自試一試

頁面底部有更多實例。

瀏覽器支持

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)換元素能夠改變元素 x 和 y 軸。3D 轉(zhuǎn)換元素還能改變其 Z 軸。

為了更好地理解 transform-origin 屬性，請查看這個演示。

Safari/Chrome 用戶：為了更好地理解 transform-origin 屬性用于 3D 轉(zhuǎn)換的情況，請查看這個演示。

注釋：該屬性必須與 transform 屬性一同使用。

為了更好地理解 transform 屬性，請查看這個演示。

語法

transform-origin: x-axis y-axis z-axis;

相關(guān)頁面

CSS3 教程：CSS3 2D 轉(zhuǎn)換

CSS3 教程：CSS3 3D 轉(zhuǎn)換