CSS 參考手冊

CSS @規(guī)則(RULES)

CSS 屬性大全

CSS3 transform-style 屬性 CSS3 transform 屬性

CSS3 transform-origin 屬性使用方法及示例

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

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

下表為此屬性的用法說明和版本歷史記錄，以及該屬性在javascript腳本中的使用語法。

默認(rèn)值：	50% 50% 0
適用于：	可變形元素
繼承：	沒有
可動畫制作：	是。請參考動畫屬性。
版本：	CSS3的新功能
JavaScript語法：	object.style.transformOrigin="20@%"

transform-origin的使用語法

該屬性的語法如下：

transform-origin: x-position | y-position | z-position | initial | inherit

注意：如果僅為transform-origin屬性指定一個值，則假定第二個值為center，它等于50%的值。

下面的示例演示了如何使用transform-origin屬性。

示例

img {
    /* Chrome, Safari, Opera */
    -webkit-transform: rotate(30deg);
    -webkit-transform-origin: 25% bottom;
    /* Firefox */
    -moz-transform: rotate(30deg);
    -moz-transform-origin: 25% bottom;
    /* IE 9 */
    -ms-transform: rotate(30deg);
    -ms-transform-origin: 25% bottom;
    
    transform: rotate(30deg);
    transform-origin: 25% bottom;
}

測試看看?/?

注意：如果兩個值中的至少一個不是關(guān)鍵字，則第一個值代表變換原點(diǎn)的水平位置（或偏移），第二個值代表變換原點(diǎn)的垂直位置（或偏移）。

屬性值

下表描述了此屬性的值。

值	描述
x-position	表示變換原點(diǎn)的水平位置（或偏移）。它可以具有以下值之一： percentage -定義相對于元素寬度的偏移量。 length -定義了使用的長度值的偏移量。 left -等于0％或零寬度。 center -等于盒子寬度的50％或一半。 right -等于100％或整個盒子的寬度。
y-position	表示變換原點(diǎn)的垂直位置（或偏移）。它可以具有以下值之一： percentage -定義相對于元素高度的偏移量。 length -定義了使用的長度值的偏移量。 top -等于0％或零高度。 center -等于盒子高度的50％或一半。 bottom -等于100％或整個盒子的高度。
z-position	一個length值，它描述了距離用戶眼睛多遠(yuǎn)的Z?=?0原點(diǎn)（對于3D變換）。百分比值無效。
initial	將此屬性設(shè)置為其默認(rèn)值。
inherit	如果指定，則關(guān)聯(lián)元素采用其父元素transform-origin的屬性值。

瀏覽器兼容性

transform-origin屬性瀏覽器的兼容性，下表中的數(shù)字表示支持該屬性的瀏覽器最低版本號；所有主流瀏覽器均支持該屬性。

	Firefox （2D）3.5 +，（3D）10+ ^-moz-，16 + Chrome （2D）4 +，（3D）12+ ^-webkit-，36 + Internet Explorer （2D）9 ^-ms-，10+ Apple Safari （2D）3.2 +，（3D）4+ ^-webkit- Opera （2D）10.5+ -o ^-，（2D）（3D）15+ ^-webkit-，23+

進(jìn)一步閱讀

請參考以下教程：CSS3 2D變換，CSS3 3D變換

相關(guān)屬性：backface-visibility，perspective，perspective-origin，transform，transform-style。

CSS3 transform-style 屬性 CSS3 transform 屬性