<!--

main_leaderboard, all: [728,90][970,90][320,50][468,60]

-->

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.

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

<!--

mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]

-->

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	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

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

JavaScript Style Object: transform property

CSS reference: transform-origin property

❮ Style Object