CSS - transform-origin
Examples
Example1
See Using CSS transforms for examples.
Live Examples
Code | Sample |
---|---|
|
HTML Copy Code <div class="box1"> </div> CSS Copy Code .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; } |
|
HTML Copy Code <div class="box2"> </div> CSS Copy Code .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); } |
Copy Code transform: rotate(30deg);<br> transform-origin: 0 0; |
HTML Copy Code <div class="box3"> </div> CSS Copy Code .box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); } |
Copy Code transform: rotate(30deg);<br> transform-origin: 100% 100%; |
HTML Copy Code <div class="box4"> </div> CSS Copy Code .box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); } |
Copy Code transform: rotate(30deg);<br> transform-origin: -10em -30em; |
HTML Copy Code <div class="box5"> </div> CSS Copy Code .box5 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: -10em -30em; transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); } |
|
HTML Copy Code <div class="box6"> </div> CSS Copy Code .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.9); -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -o-transform: scale(1.9); } |
Copy Code transform: scale(1.9);<br> transform-origin: 0 0; |
HTML Copy Code <div class="box7"> </div> CSS Copy Code .box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.9); -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -o-transform: scale(1.9); transform-origin: 0 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; } |
Copy Code transform: scale(1.9);<br> transform-origin: 100% -30%; |
HTML Copy Code <div class="box8"> </div> CSS Copy Code .box8 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.9); -webkit-transform: scale(1.9); -moz-transform: scale(1.9); -o-transform: scale(1.9); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; -moz-transform-origin: 100% -30%; -o-transform-origin: 100% -30%; } |
Copy Code transform: skewX(50deg);<br> transform-origin: 100% -30%; |
HTML Copy Code <div class="box9"> </div> CSS Copy Code .box9 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewX(50deg); trasnform-origin: 100% -30%; -webkit-transform: skewX(50deg); -moz-transform: skewX(50deg); -o-transform: skewX(50deg); } |
Copy Code transform: skewY(50deg);<br> transform-origin: 100% -30%; |
HTML Copy Code <div class="box10"> </div> CSS Copy Code .box10 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewY(50deg); -webkit-transform: skewY(50deg); -moz-transform: skewY(50deg); -o-transform: skewY(50deg); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; -moz-transform-origin: 100% -30%; -o-transform-origin: 100% -30%; } |
Syntax
/* One-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset y-offset */ transform-origin: 3cm 2px; /* y-offset x-offset-keyword */ transform-origin: 2px left; /* 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; /* y-offset x-offset-keyword z-offset */ transform-origin: 2px left 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;
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 syntax
<a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/transform-origin#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/transform-origin#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#double_ampersand" title="Double ampersand">&&</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/transform-origin#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a><p>where <br><code><length-percentage> = <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a></code></p>
Description
The transform-origin
property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate()
function is the centre 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.)
Not explicitly set values are reset to their corresponding values.
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 |
Animatable | yes, as a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. |
Canonical order | One or two values, with length made absolute and keywords translated to percentages |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) -webkit | 3.5 (1.9.1)-moz 16.0 (16.0)[2] |
9.0-ms 10.0 |
10.5-o 12.10 |
3.1-webkit |
Three-value syntax | (Yes) -webkit | 10 (10)-moz 16.0 (16.0) |
5.5 (partial) [1] 9.0 -ms 10.0 |
No support | (Yes) -webkit |
Support in SVG | (Yes) | 41 (41)[4] 43 (43)[5] |
No support | (Yes) | ? |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | ? | ? | 8.1 -webkit[3] | ? | ? |
Three-value syntax | ? | ? | ? | ? | No support | ? |
Support in SVG | ? | 41 (41)[4] 43 (43)[5] |
? | ? | ? | ? |
[1] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve similar effects.
[2] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit
prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit
, defaulting to false
. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true
.
[3] See MSDN transform-origin documentation.
[4] Percentage handling for transform-origin
values for SVG elements was behind the preference svg.transform-origin.enabled
, defaulting to false
. Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
[5] Keywords and percentages refer to the canvas instead of the object itself. See bug 1209061.
See Also
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transforms Level 1 The definition of 'transform-origin' in that specification. |
Working Draft |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/transform-origin