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 transform-origin property is supported in Internet Explorer 10, Firefox, and Opera.

Internet Explorer 9 supports an alternative, the -ms-transform-origin property, but only for 2D-transforms.

Safari and Chrome supports an alternative, the -webkit-transform-origin property, on both 2D- and 3D-transfoms.

Opera supports 2D transforms only.

Definition and Usage

The transform-origin 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.

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
Version:	CSS3
JavaScript syntax:	object.style.transformOrigin="20% 40%"

Syntax

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

Property 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. Possible values: length