Style 對象
執行個體
設定旋轉元素的基點位置:
document.getElementById("myDIV").style.transformOrigin="0 0";
定義和用法
transformOrigin 屬性允許您改變被轉換元素的位置。
2D 轉換元素能夠改變元素 X 和 Y 軸。3D 轉換元素還能改變元素的 Z 軸。
注意:該屬性必須與 transform 屬性一起使用。
浏覽器支援
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWafVGbilGdhBXbvN2LcNXZnFWbp9CXt92YuI2bv5Wdy5yd3d3Lc9CX6MHc0RHaiojIsJye.gif)
Internet Explorer 10、Firefox 和 Opera 支援 transformOrigin 屬性。
Internet Explorer 9 支援另一個可替代該屬性的屬性,即 msTransformOrigin 屬性(隻用于 2D 轉換)。
Chrome、Safari 和 Opera 支援另一個可替代該屬性的屬性,即 WebkitTransformOrigin 屬性(可用于 3D 和 2D 轉換)。
文法
傳回 transformOrigin 屬性:
object.style.transformOrigin
設定 transformOrigin 屬性:
object.style.transformOrigin="x-axis y-axis z-axis|initial|inherit"
屬性值
值 | 描述 |
---|---|
x-axis | 定義視圖被置于 X 軸的何處。可能的值:
|
y-axis | 定義視圖被置于 Y 軸的何處。可能的值:
|
z-axis | 定義視圖被置于 Z 軸的何處(用于 3D 轉換)。可能的值: |
initial | 設定該屬性為它的預設值。請參閱 initial。 |
inherit | 從父元素繼承該屬性。請參閱 inherit。 |
技術細節
預設值: | 50% 50% 0 |
---|---|
傳回值: | 字元串,表示元素的 transform-origin 屬性。 |
CSS 版本 | CSS3 |
相關文章
JavaScript Style 對象:transform 屬性
CSS 參考手冊:transform-origin 屬性
Style 對象