CSS Reference Property

transform-origin

The transform-origin property is used to change the position of the origin of transformation of an element.

For example, rotating an element about the transform origin will result in different rotation results depending on the position of the origin.

The following image shows the result of applying the rotate() transform function to rotate an element by 45deg (forty five degrees) in two-dimensional space using different transform origins. The black circle represents the position of the transform origin in each case. The transform function is applied using the transform property.

transform-origin-examples — Image showing the result of rotating an element using `transform: rotate(45deg)` with different `transform-origin` values.

The default value of the transform origin is at 50% 50%, which is exactly the center of any given element.

The transform-origin can be specified using offset keywords, length values, or percentage values. It takes either two space-separated values (lentg, percentage, or keywords) for two-dimensional transforms, or three space-separated values for three-dimensional transforms. See the Values section below for details and possible combinations.

Official Syntax

Syntax:

transform-origin: [ left | center | right | top | bottom | <percentage> | <length> ]
| 
  [ left | center | right | <percentage> | <length> ]
  [ top | center | bottom | <percentage> | <length> ] <length>?
|
  [ center | [ left | right ] ] && [ center | [ top | bottom ] ] <length>?

Initial: 50% 50%
Applies To: transformable elements
Animatable: yes, as simple list of length, percentage, or calc

Values

<percentage>: A <percentage> value. A percentage for the horizontal offset (first value) is relative to the width of the border box. A percentage for the vertical offset (second value) is relative to height of the border box. The value for the horizontal and vertical offset represent an offset from the top left corner of the border box. See the <percentage> entry for a list of possible values.
<length>: A <length> value. A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box. See the <length> entry for a list of possible values and units.
top: Computes to ‘0%’ for the vertical position.
right: Computes to ‘100%’ for the horizontal position.
bottom: Computes to ‘100%’ for the vertical position.
left: Computes to ‘0%’ for the horizontal position.
center: Computes to ‘50%’ (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or ‘50%’ (top 50%) for the vertical position if it is.

Notes

If two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal position (or offset) and the second represents the vertical position (or offset). A third value always represents the Z position (or offset) and must be of type <length>.

If all three values are provided, the first value represents the horizontal offset, the second value represents the vertical offset, and the third value (if present) represents the position on the z-axis.

If only one value is specified, the second value is assumed to be center. If one or two values are specified, the third value is assumed to be 0px (for 3D transforms).

Examples

The following are all valid transform-origin declarations:

transform-origin: top center;
transform-origin: 100% 30px;
transform-origin: 30px 60px;
transform-origin: center;
transform-origin: left;
transform-origin: 30% 50% 0px;
transform-origin: bottom right;

Live Demo

The following demo shows the result of rotating an element using different transform-origin values. Try changing the values of the transform origin to see the rotation result change.

View this demo on the Codrops Playground

Browser Support

The transform-origin property is supported in Chrome (prefixed -webkit-), Firefox, Safari (-wekit-), Opera 10.5+ prefixed with -o- and unprefixed starting version 12.10, Internet Explorer 9 prefixed with -ms- and unprefixed starting from version 10, and on Android and iOS.

The three-value syntax is not supported in Opera and Internet Explorer prior to version 10.