Style transformOrigin attribute

Definition and Usage

transformOrigin This attribute allows you to change the position of the transformed element.

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

Note:This attribute must be used with transform attribute Used together.

See also:

JavaScript Style Object:transform attribute

CSS Reference Manual:transform-origin attribute

Example

Set the basic position of the rotated element:

document.getElementById("myDIV").style.transformOrigin = "0 0";

Try it yourself

Syntax

Return the transformOrigin attribute:

object.style.transformOrigin

Set the transformOrigin attribute:

object.style.transformOrigin = "x-axis y-axis z-axis|initial|inherit"

Attribute value

Value Description
x-axis

Defines the position of the view on the x-axis. Possible values:

  • left
  • center
  • right
  • length
  • %
y-axis

Defines the position of the view on the y-axis. Possible values:

  • top
  • center
  • bottom
  • length
  • %
z-axis

Defines the position of the view on the z-axis. Possible values:

  • length
initial Sets this attribute to its default value. See also initial.
inherit Inherits this attribute from its parent element. See also inherit.

Technical details

Default value: 50% 50% 0
Return value: A string that represents the transform-origin attribute.
CSS version: CSS3

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0