The transform-origin
CSS property sets the origin for an element's transformations.
The transformation origin is the point around which a transformation is applied. For example, the transformation origin of the rotate()
function is the center of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)
/* One-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset | y-offset */ transform-origin: 3cm 2px; /* x-offset-keyword | y-offset */ transform-origin: left 2px; /* x-offset-keyword | y-offset-keyword */ transform-origin: right top; /* y-offset-keyword | x-offset-keyword */ transform-origin: top right; /* x-offset | y-offset | z-offset */ transform-origin: 2px 30% 10px; /* x-offset-keyword | y-offset | z-offset */ transform-origin: left 5px -3px; /* x-offset-keyword | y-offset-keyword | z-offset */ transform-origin: right bottom 2cm; /* y-offset-keyword | x-offset-keyword | z-offset */ transform-origin: bottom right 2cm; /* Global values */ transform-origin: inherit; transform-origin: initial; transform-origin: unset;
The transform-origin
property may be specified using one, two, or three values, where each value represents an offset. Offsets that are not explicitly defined are reset to their corresponding initial values.
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 offset and the second represents the vertical offset.
<length>
, a <percentage>
, or one of the keywords left
, center
, right
, top
, and bottom
.<length>
, a <percentage>
, or one of the keywords left
, center
, and right
.<length>
, a <percentage>
, or one of the keywords top
, center
, and bottom
.<length>
. It always represents the Z offset.<length>
or a <percentage>
describing how far from the left edge of the box the origin of the transform is set.left
, right
, top
, bottom
, or center
keyword describing the corresponding offset.<length>
or a <percentage>
describing how far from the top edge of the box the origin of the transform is set.left
, right
, or center
keyword describing how far from the left edge of the box the origin of the transform is set.top
, bottom
, or center
keyword describing how far from the top edge of the box the origin of the transform is set.<length>
(and never a <percentage>
which would make the statement invalid) describing how far from the user eye the z=0 origin is set.The keywords are convenience shorthands and match the following <percentage>
values:
Keyword | Value |
---|---|
left | 0% |
center | 50% |
right | 100% |
top | 0% |
bottom | 100% |
[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where
<length-percentage> = <length> | <percentage>
Code | Sample |
---|---|
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
Specification | Status | Comment |
---|---|---|
CSS Transforms Level 1 The definition of 'transform-origin' in that specification. | Working Draft |
Initial value | 50% 50% 0 |
---|---|
Applies to | transformable elements |
Inherited | no |
Percentages | refer to the size of bounding box |
Media | visual |
Computed value | for <length> the absolute value, otherwise a percentage |
Animation type | simple list of length, percentage, or calc |
Canonical order | One or two values, with length made absolute and keywords translated to percentages |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes
|
12
|
16
|
10
|
12.1
|
3.1
|
Three-value syntax | Yes | ? | 10 | 9 | No | Yes |
Support in SVG | Yes | ? | 43
|
No | Yes | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes
|
16
|
? | ? | ? |
Three-value syntax | ? | ? | ? | ? | No | ? | ? |
Support in SVG | ? | ? | ? | ? | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin