Latest web development tutorials

HTML DOM Style transformOrigin property

Style Object Reference Style Objects

Examples

Set point position rotary elements:

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

try it"

Definition and Usage

transformOrigin property allows you to change the position of the element to be converted.

2D conversion element capable of changing elements X and Y axes. 3D conversion element can change the Z elements.

Note: This property must transform used with the property.


Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox and Opera support transformOrigin property.

Internet Explorer 9 supports another alternative of the property attribute that msTransformOrigin property (only for 2D conversion).

Chrome, Safari and Opera support another alternative of the property attribute that WebkitTransformOrigin property (can be used for 3D and 2D conversion).


grammar

Back transformOrigin properties:

object .style.transformOrigin

Setting transformOrigin properties:

object .style.transformOrigin="x-axis y-axis z-axis|initial|inherit"

Property Value

描述
x-axis 定义视图被置于 X 轴的何处。可能的值:
  • left
  • center
  • right
  • length
  • %
y-axis 定义视图被置于 Y 轴的何处。可能的值:
  • top
  • center
  • bottom
  • length
  • %
z-axis 定义视图被置于 Z 轴的何处(用于 3D 转换)。可能的值:
  • length
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

technical details

Defaults: 50% 50% 0
return value: String representing the transform-origin property element.
CSS version CSS3


related articles

JavaScript Style objects: the Transform property

CSS Reference Manual: the Transform property-Origin


Style Object Reference Style Objects