Style transformOrigin Property
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 | 9.0 | 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:
|
| y-axis | Defining where the view is placed at the y-axis. Possible values:
|
| z-axis | Defining where the view is placed at the z-axis (for 3D transforms). Possible values:
|
| 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
