JavaScript Reference

Overview (JavaScript and HTML DOM Reference)

Style transformOrigin Property

Set the base point position of a rotated element:

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

The transformOrigin property allows you to change the position of transformed elements.

2D transformed elements can change the X and Y axes of the element. 3D transformed elements can also change the Z axis of the element.

Note: This property must be used together with the transform property.

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 10, Firefox, and Opera support the transformOrigin property.

Internet Explorer 9 supports an alternative property to this one, the msTransformOrigin property (only for 2D transforms).

Chrome, Safari, and Opera support an alternative property to this one, the WebkitTransformOrigin property (can be used for 3D and 2D transforms).

Return the transformOrigin property:

object.style.transformOrigin

Set the transformOrigin property:

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

Value	Description
x-axis	Defines where the view is placed on the X-axis. Possible values: * left * center * right * length * %
y-axis	Defines where the view is placed on the Y-axis. Possible values: * top * center * bottom * length * %
z-axis	Defines where the view is placed on the Z-axis (for 3D transforms). Possible values: * length
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Default Value:	50% 50% 0
Return Value:	A string, representing the element's transform-origin property.
CSS Version:	CSS3

JavaScript Style Object: transform Property