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
The default value of the transform origin is at 50% 50%, which is exactly the center of any given element.
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.
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
<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>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.
- Computes to ‘0%’ for the vertical position.
- Computes to ‘100%’ for the horizontal position.
- Computes to ‘100%’ for the vertical position.
- Computes to ‘0%’ for the horizontal position.
- 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.
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
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).
The following are all valid
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;
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.
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.