The transform-origin
CSS property sets the origin for an element's transformations.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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 value of the property, then applying the element's transform, then translating by the negated property value.
This means, this definition
transform-origin: -100% 50%; transform: rotate(45deg);
results in the same transformation as
transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);
By default, the origin of a transform is center
.
Syntax
/* 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.
- One-value syntax:
- The value must be a
<length>
, a<percentage>
, or one of the keywordsleft
,center
,right
,top
, andbottom
.
- The value must be a
- Two-value syntax:
- One value must be a
<length>
, a<percentage>
, or one of the keywordsleft
,center
, andright
. - The other value must be a
<length>
, a<percentage>
, or one of the keywordstop
,center
, andbottom
.
- One value must be a
- Three-value syntax:
- The first two values are the same as for the two-value syntax.
- The third value must be a
<length>
. It always represents the Z offset.
Values
- x-offset
- Is a
<length>
or a<percentage>
describing how far from the left edge of the box the origin of the transform is set. - offset-keyword
- Is one of the
left
,right
,top
,bottom
, orcenter
keyword describing the corresponding offset. - y-offset
- Is a
<length>
or a<percentage>
describing how far from the top edge of the box the origin of the transform is set. - x-offset-keyword
- Is one of the
left
,right
, orcenter
keyword describing how far from the left edge of the box the origin of the transform is set. - y-offset-keyword
- Is one of the
top
,bottom
, orcenter
keyword describing how far from the top edge of the box the origin of the transform is set. - z-offset
- Is a
<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% |
Formal definition
Initial value | 50% 50% 0 |
---|---|
Applies to | transformable elements |
Inherited | no |
Percentages | refer to the size of bounding box |
Computed value | for <length> the absolute value, otherwise a percentage |
Animation type | simple list of length, percentage, or calc |
Formal syntax
[ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where
<length-percentage> = <length> | <percentage>
Examples
Code | Sample |
---|---|
|
<div class="box1"> </div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; } |
|
<div class="box2"> </div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); -webkit-transform: rotate(30deg); } |
|
<div class="box3"> </div> .box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; -webkit-transform-origin: 0 0; transform: rotate(30deg); -webkit-transform: rotate(30deg); } |
|
<div class="box4"> </div> .box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transform: rotate(30deg); -webkit-transform: rotate(30deg); } |
|
<div class="box5"> </div> .box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -1em -3em; -webkit-transform-origin: -1em -3em; transform: rotate(30deg); -webkit-transform: rotate(30deg); } |
|
<div class="box6"> </div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale( |
|
<div class="box7"> </div> .box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale( |
|
<div class="box8"> </div> .box8 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale( |
|
<div class="box9"> </div> .box9 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewX(50deg); -webkit-transform: skewX(50deg); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; } |
|
<div class="box10"> </div> .box10 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewY(50deg); -webkit-transform: skewY(50deg); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; } |
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transforms Level 1 The definition of 'transform-origin' in that specification. |
Working Draft |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
transform-origin | Chrome
Full support
36
| Edge
Full support
12
| Firefox
Full support
16
| IE
Full support
10
| Opera
Full support
23
| Safari
Full support
9
| WebView Android
Full support
37
| Chrome Android
Full support
36
| Firefox Android
Full support
16
| Opera Android
Full support
24
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
3.0
|
Support in SVG | Chrome Full support 19 | Edge Full support 17 | Firefox
Full support
43
| IE No support No | Opera Full support 15 | Safari
Full support
6
| WebView Android Full support ≤37 | Chrome Android Full support 25 | Firefox Android
Full support
43
| Opera Android Full support 14 | Safari iOS
Full support
6
| Samsung Internet Android Full support 1.5 |
Three-value syntax | Chrome Full support 12 | Edge Full support 12 | Firefox Full support 10 | IE Full support 9 | Opera Full support 15 | Safari Full support 5 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 10 | Opera Android Full support 14 | Safari iOS Full support 3.2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.