CSS3 transform-origin Property


Example

Set the base point position of the rotated element:

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}

Try it Yourself »

Browser Support

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

The number immediately preceding -webkit-, -ms-, or -moz- is the first browser version that supports the prefixed property.

Property
transform-origin
(two-value 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
(three-value syntax)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-

Attribute definition and usage instructions

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

2D transformed elements can change the X and Y axes of an element. 3D transformed elements can also change the Z axis of an element.

To better understand the transform-origin property, check out thisdemonstration.

Note:To use this attribute, you must first usetransformProperty.

Tip:Safari/Chrome users: For a better understanding3D transformationAttributes, please view.demonstration.

Default value: 50% 50% 0
Inherited: no
version: CSS3
JavaScript Syntax: object.style.transformOrigin="20% 40%"

Syntax

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

Value Description
x-axis

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

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

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

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

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

  • length
other extensions