Style transformOrigin 屬性

Style 對象參考手冊 Style 對象

實例

設置旋轉元素的基點位置：

document.getElementById("myDIV").style.transformOrigin="0 0";

定義和用法

transformOrigin 屬性允許您改變被轉換元素的位置。

2D 轉換元素能夠改變元素 X 和 Y 軸。3D 轉換元素還能改變元素的 Z 軸。

注意：該屬性必須與 transform 屬性一起使用。

流覽器支持

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 10、Firefox 和 Opera 支持 transformOrigin 屬性。

Internet Explorer 9 支持另一個可替代該屬性的屬性，即 msTransformOrigin 屬性（只用於 2D 轉換）。

Chrome、Safari 和 Opera 支持另一個可替代該屬性的屬性，即 WebkitTransformOrigin 屬性（可用於 3D 和 2D 轉換）。

語法

返回 transformOrigin 屬性：

object.style.transformOrigin

設置 transformOrigin 屬性：

object.style.transformOrigin="x-axis y-axis z-axis|initial|inherit"

屬性值

值 描述
x-axis 定義視圖被置於 X 軸的何處。可能的值：
  • left
  • center
  • right
  • length
  • %
y-axis 定義視圖被置於 Y 軸的何處。可能的值：
  • top
  • center
  • bottom
  • length
  • %
z-axis 定義視圖被置於 Z 軸的何處（用於 3D 轉換）。可能的值：
  • length
initial 設置該屬性為它的默認值。請參閱 initial。
inherit 從父元素繼承該屬性。請參閱 inherit。

技術細節

默認值： 50% 50% 0
返回值： 字串，表示元素的 transform-origin 屬性。
CSS 版本 CSS3

相關文章

JavaScript Style 對象：transform 屬性

CSS 參考手冊：transform-origin 屬性

Style 對象參考手冊 Style 對象