{{ CSSRef("CSS Transforms") }}
{{ SeeCompatTable() }}
Summary
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.
{{Cssinfo}}
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 {{cssxref("<length>")}} or a {{cssxref("<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 {{cssxref("<length>")}} or a {{cssxref("<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 {{cssxref("<length>")}} (and never a {{cssxref("<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 {{cssxref("<percentage>")}} values:
keyword | value |
---|---|
left |
0% |
center |
50% |
right |
100% |
top |
0% |
bottom |
100% |
Formal syntax
{{csssyntax}}
Examples
See Using CSS transforms for examples.
Live 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; -moz-transform: none; -o-transform: none; } {{EmbedLiveSample('transform_none', '', '', '', '', 'no-button') }} |
|
<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); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); } {{EmbedLiveSample('transform_rotate_only', '', '', '', '', 'no-button') }} |
|
<div class="box3"> </div> .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); } {{EmbedLiveSample('transform_rotate', '', '', '', '', 'no-button') }} |
|
<div class="box4"> </div> .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); } {{EmbedLiveSample('transform_rotate_with_percentage', '', '', '', '', 'no-button') }} |
|
<div class="box5"> </div> .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); } {{EmbedLiveSample('transform_rotate_with_em', '', '', '', '', 'no-button') }} |
|
<div class="box6"> </div> .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); } {{EmbedLiveSample('transform_scale_only', '', '', '', '', 'no-button') }} |
|
<div class="box7"> </div> .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; } {{EmbedLiveSample('transform_scale_without_origin', '', '', '', '', 'no-button') }} |
|
<div class="box8"> </div> .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%; } {{EmbedLiveSample('transform_scale', '', '', '', '', 'no-button') }} |
|
<div class="box9"> </div> .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); } {{EmbedLiveSample('transform_skew_x', '', '', '', '', 'no-button') }} |
|
<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); -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%; } {{EmbedLiveSample('transform_skew_y', '', '', '', '', 'no-button') }} |
Specifications
Specification | Status | Comment |
---|---|---|
{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }} | {{ Spec2('CSS3 Transforms') }} |
Browser compatibility
{{ CompatibilityTable() }}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }} | {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }} {{ CompatGeckoDesktop("16.0") }} |
9.0{{ property_prefix("-ms") }} 10.0 |
10.5{{ property_prefix("-o") }} 12.10 |
3.1{{ property_prefix("-webkit") }} |
Three-value syntax | {{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }} | {{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} {{ CompatGeckoDesktop("16.0") }} |
5.5 (partial) [1] 9.0 {{property_prefix("-ms")}} 10.0 |
{{ CompatNo() }} | {{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }} |
Support in SVG | {{CompatVersionUnknown}} | {{CompatGeckoDesktop("41")}}[3] {{CompatGeckoDesktop("43")}}[4] |
{{CompatNo}} | {{CompatVersionUnknown}} | {{CompatUnknown}} |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | 8.1 {{ property_prefix("-webkit")}} [2] | {{ CompatUnknown() }} | {{ CompatUnknown() }} |
Three-value syntax | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatUnknown() }} | {{ CompatNo() }} | {{ CompatUnknown() }} |
Support in SVG | {{CompatUnknown}} | {{CompatGeckoDesktop("41")}} [3] {{CompatGeckoDesktop("43")}} [4] |
{{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
[1] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve similar effects.
[2] See MSDN transform-origin documentation.
[3] 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")}}.
[4] Keywords and percentages refer to the canvas instead of the object itself. See {{bug("1209061")}}.
{{ EmbedCompatTable("web-css-transform-origin") }}