Latest web development tutorials

HTML DOM Style transformOrigin 屬性

Style 對象參考手冊 Style對象

實例

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

document.getElementById("myDIV").style.transformOrigin="0 0";

嘗試一下»

定義和用法

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

2D 轉換元素能夠改變元素X 和Y 軸。 3D 轉換元素還能改變元素的Z 軸。

注意：該屬性必須與transform屬性一起使用。

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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 轴的何处。可能的值：
  • left
  • center
  • right
  • length
  • %
y-axis 定义视图被置于 Y 轴的何处。可能的值：
  • top
  • center
  • bottom
  • length
  • %
z-axis 定义视图被置于 Z 轴的何处（用于 3D 转换）。可能的值：
  • length
initial 设置该属性为它的默认值。请参阅 initial 。
inherit 从父元素继承该属性。请参阅 inherit 。

技術細節

默認值： 50% 50% 0
返回值： 字符串，表示元素的transform-origin 屬性。
CSS 版本 CSS3

相關文章

JavaScript Style對象： transform屬性

CSS參考手冊： transform-origin屬性

Style 對象參考手冊 Style對象