CSS3 transform-origin Property

Example

Set a rotated element's base placement:

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The transform-origin property is not supported in any browser.

Firefox supports an alternative, the -moz-transform-origin property, but only for 2D-transforms.

Opera supports an alternative, the -o-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.


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.

Safari/Chrome users: 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