CSS transform-origin 屬性

定義和用法

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

2D 轉換元素能夠改變元素 x 和 y 軸。3D 轉換元素還能改變其 Z 軸。

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

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

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

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

另請參閱：

CSS3 教程：CSS3 2D 轉換

CSS3 教程：CSS3 3D 轉換

HTML DOM 參考手冊：transformOrigin 屬性

實例

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

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

親自試一試

頁面底部有更多實例。

CSS 語法

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

技術細節

默認值： 50% 50% 0
繼承性： no
版本： CSS3
JavaScript 語法： object.style.transformOrigin="20% 40%"

瀏覽器支持

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

帶 -webkit-、-moz- 或 -ms- 的數字表示使用前綴的首個版本。

屬性 Chrome IE Firefox Safari Opera
transform-origin
(二值語法)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(三值語法)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-