CSS3 transform-origin Property

Example

Set a rotated element's base placement:

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

Try it yourself »

Definition and Usage

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

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

To better understand the transform-origin property, view a demo.

Note: This property must be used together with the transform property.

Tip: To better understand this property for 3D transforms, view a demo.

Default value:	50% 50% 0
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.transformOrigin="0 0" Try it

Browser Support

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

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

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

CSS Syntax

transform-origin: x-axis y-axis z-axis|initial|inherit;

Property Values

Property Value	Description
x-axis	Defines where the view is placed at the x-axis. Possible values: left center right length %
y-axis	Defines where the view is placed at the y-axis. Possible values: top center bottom length %
z-axis	Defines where the view is placed at the z-axis (for 3D transformations). 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