# CSS3 transform-origin 屬性 ## 實例 設置旋轉元素的基點位置： ``` 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 */ } ``` 頁面底部有更多實例。 ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | Internet Explorer 10、Firefox、Opera 支持 transform-origin 屬性。 Internet Explorer 9 支持替代的 -ms-transform-origin 屬性（僅適用于 2D 轉換）。 Safari 和 Chrome 支持替代的 -webkit-transform-origin 屬性（3D 和 2D 轉換）。 Opera 只支持 2D 轉換。 ## 定義和用法 transform-origin 屬性允許您改變被轉換元素的位置。 2D 轉換元素能夠改變元素 x 和 y 軸。3D 轉換元素還能改變其 Z 軸。 為了更好地理解 transform-origin 屬性，請查看這個[演示](/example/css3/demo_css3_transform-origin.html)。 Safari/Chrome 用戶：為了更好地理解 transform-origin 屬性用于 3D 轉換的情況，請查看這個[演示](/example/css3/demo_css3_transform-origin_3D.html)。 注釋：該屬性必須與 [transform](/cssref/pr_transform.asp "CSS3 transform 屬性") 屬性一同使用。 為了更好地理解 transform 屬性，請查看這個[演示](/example/css3/demo_css3_transform.html)。 | 默認值： | 50% 50% 0 | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS3 | | --- | --- | | JavaScript 語法： | _object_.style.transformOrigin="20% 40%" | | --- | --- | ## 語法 ``` transform-origin: _x-axis_ _y-axis_ _z-axis_; ``` | 值 | 描述 | | --- | --- | | x-axis | 定義視圖被置于 X 軸的何處。可能的值： * left * center * right * _length_ * _%_ | | y-axis | 定義視圖被置于 Y 軸的何處。可能的值： * top * center * bottom * _length_ * _%_ | | z-axis | 定義視圖被置于 Z 軸的何處。可能的值： * _length_ | ## 相關頁面 CSS3 教程：[CSS3 2D 轉換](/css3/css3_2dtransform.asp "CSS3 2D 轉換") CSS3 教程：[CSS3 3D 轉換](/css3/css3_3dtransform.asp "CSS3 3D 轉換")