THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML

Style transformOrigin Property

Style Object Reference Style Object

Example

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.

Property
transformOrigin 36.0 10.0
9.0 msTransformOrigin
16.0 Not supported
Use WebkitTransformOrigin
23.0

Syntax

Return the transformOrigin property:

object.style.transformOrigin

Set the transformOrigin property:

object.style.transformOrigin="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 Reference Style Object