Style transformOrigin Property

❮ Style Object


Set a rotated element's base placement:

document.getElementById("myDIV").style.transformOrigin = "0 0";
Try it Yourself »

Definition and Usage

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

2D transformed element can change the x- and y-axis of the element. 3D transformed element can also change the z-axis of the element.

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

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

transformOrigin 36.0 10.0
9.0 msTransformOrigin
16.0 Not supported
Use WebkitTransformOrigin


Return the transformOrigin property:

Set the transformOrigin property: = "x-axis y-axis z-axis|initial|inherit"

Property Values

Value Description
x-axis Defining where the view is placed at the x-axis. Possible values:
  • left
  • center
  • right
  • length
  • %
y-axis Defining where the view is placed at the y-axis. Possible values:
  • top
  • center
  • bottom
  • length
  • %
z-axis Defining where the view is placed at the z-axis (for 3D transforms). Possible values:
  • length
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Technical Details

Default Value: 50% 50% 0
Return Value: A String, representing the transform-origin property of an element
CSS Version CSS3

Related Pages

JavaScript Style Object: transform property

CSS reference: transform-origin property

❮ Style Object