Style transformOrigin 屬性

定義和用法

transformOrigin 屬性允許您更改已轉換元素的位置。

2D 轉換元素可以改變元素的 x 軸和 y 軸。3D 轉換元素還可以改變元素的 z 軸。

注釋：此屬性必須與 transform 屬性 一起使用。

另請參閱：

JavaScript Style 對象：transform 屬性

CSS 參考手冊：transform-origin 屬性

實例

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

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

親自試一試

語法

返回 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 軸上的放置位置。可能的值：

  • length
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

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

瀏覽器支持

表中的數字注明了首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0