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 and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}

流覽器支持

表格中的數字表示支持該屬性的第一個流覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該首碼屬性的第一個流覽器版本號。

屬性
transform-origin
(two-value syntax)		 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
(three-value syntax)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-

屬性定義及使用說明

transform-Origin屬性允許您更改轉換元素的位置。

2D轉換元素可以改變元素的X和Y軸。 3D轉換元素，還可以更改元素的Z軸。

為了更好地理解Transform-Origin屬性，請查看這個.

注意： 使用此屬性必須先使用 transform 屬性。

Tip:Safari/Chrome用戶：為了更好地理解3D 轉換屬性,請查看 .

默認值： 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