CSS transform-origin property

Definition and usage

The transform-origin property allows you to change the position of the transformed element.

2D transformation elements can change the x and y axes of elements. 3D transformation elements can also change their Z-axis.

To better understand the transform-origin property, please see thisDemonstration.

Safari/Chrome users: To better understand the use of the transform-origin property in 3D transformations, please see thisDemonstration.

Note:This property must be used with transform properties.

To better understand the transform property, please see thisDemonstration.

See also:

CSS3 Tutorial:CSS3 2D transformation

CSS3 Tutorial:CSS3 3D transformation

HTML DOM Reference Manual:transformOrigin property

Example

Set the base point position of the rotated element:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Try it yourself

More examples are at the bottom of the page.

CSS syntax

transform-origin: x-axis y-axis z-axis;

Property value

Value Description
x-axis

Define where the view is placed on the X-axis. Possible values:

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

Define where the view is placed on the Y-axis. Possible values:

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

Define where the view is placed on the Z-axis. Possible values:

  • length

Technical details

Default value: 50% 50% 0
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.transformOrigin="20% 40%"

Browser support

The numbers in the table note the first browser version that fully supports the property.

Numbers in the table indicate the first browser version that fully supports this property with prefixes such as -webkit-, -moz-, or -ms-.

Property Chrome IE Firefox Safari Opera
transform-origin
(Bivalue syntax)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(Trivalue syntax)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-