CSS3 transform-origin 屬性

實(shí)例

設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置：

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 */
}

嘗試一下 ?

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。

屬性          
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-

屬性定義及使用說(shuō)明

transform-Origin屬性允許您更改轉(zhuǎn)換元素的位置。

2D轉(zhuǎn)換元素可以改變?cè)氐腦和Y軸。 3D轉(zhuǎn)換元素，還可以更改元素的Z軸。

為了更好地理解Transform-Origin屬性，請(qǐng)查看這個(gè)演示.

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

Tip:Safari/Chrome用戶：為了更好地理解3D 轉(zhuǎn)換屬性,請(qǐng)查看演示.

默認(rèn)值： 50% 50% 0
繼承： no
版本： CSS3
JavaScript 語(yǔ)法： object.style.transformOrigin="20% 40%"

語(yǔ)法

transform-origin: x-axis y-axis z-axis;
值描述
x-axis

定義視圖被置于 X 軸的何處?？赡艿闹担?/p>

  • left
  • center
  • right
  • length
  • %
y-axis

定義視圖被置于 Y 軸的何處。可能的值：

  • top
  • center
  • bottom
  • length
  • %
z-axis

定義視圖被置于 Z 軸的何處?？赡艿闹担?/p>

  • length