Latest web development tutorials
 

Style transformOrigin Property

< 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

Internet Explorer Firefox Opera Google Chrome Safari

The transformOrigin property is supported in Internet Explorer 10, Firefox, and Opera.

Internet Explorer 9 supports an alternative, the msTransformOrigin property, but only for 2D-transforms.

Chrome, Safari, and Opera support an alternative, the WebkitTransformOrigin property, for both 2D- and 3D-transfoms.


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