mozilla

Revision 236967 of transform-origin

  • Revision slug: CSS/transform-origin
  • Revision title: transform-origin
  • Revision id: 236967
  • Created:
  • Creator: FredB
  • Is current revision? No
  • Comment 11 words added

Revision Content

{{ CSSRef() }}

Summary

The transform-origin CSS 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.)

<style type="text/css"></style>
  • {{ Xref_cssinitial() }}: 50% 50%
  • Applies to: all block level and inline level elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: refer to the size of the box itself
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: for <length> the absolute value, otherwise a percentage

Syntax

transform-origin:  [ <percentage> | <length> | left | center | right ]
                   [ <percentage> | <length> | top | center | bottom ] ?
transform-origin:  [ left | center | right ] || [ top | center | bottom ]

Values

Accepts one or two values.

  • One single value sets the horizontal position, the vertical position is set to 50%.
  • Two values apply first to the horizontal and second to the vertical position.

Combinations are allowed of keyword, {{ Xref_csslength() }}, or {{ Xref_csspercentage() }} values, but if keywords are mixed with other values, left and right may only be used as the first value, and top and bottom may only be used as the second value. Negative positions are allowed.

<percentage>
With a value pair of 0% 0%, (or just 0 0) the transform-origin is the upper left corner of the box. A value pair of 100% 100% places the transform-origin to the lower right corner. With a value pair of 14% 84%, the point 14% across and 84% down the box is the transform-origin.
<length>
With a value pair of e.g. 2cm 1cm, the transform-origin is placed 2cm to the right and 1cm below the upper left corner of the element.
top left | left top
Same as 0 0
top | top center | center top
Same as 50% 0
right top | top right
Same as 100% 0
left | left center | center left
Same as 0 50%
center | center center
Same as 50% 50% (default value)
right | right center | center right
Same as 100% 50%
bottom left | left bottom
Same as 0 100%
bottom | bottom center | center bottom
Same as 50% 100%
bottom right | right bottom
Same as 100% 100%

Examples

See Using CSS transforms for examples.

Live Examples

transform: none;  
transform: rotate(30deg);  
transform: rotate(30deg);
transform-origin: 0 0;
 
transform: rotate(30deg);
transform-origin: 100% 100%;
 
transform: rotate(30deg);
transform-origin: -10em -30em;
 
transform: scale(1.9);  
transform: scale(1.9);
transform-origin: 0 0;
 
transform: scale(1.9);
transform-origin: 100% -30%;
 
transform: skew(50deg);  
transform: skew(50deg);
transform-origin: 0 0;
 
transform: skew(50deg);
transform-origin: 100% 100%;
 

Specifications

Specification Status Comment
CSS Transforms {{ 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") }} 10.0
9.0{{ property_prefix("-ms") }}
10.5{{ property_prefix("-o") }} 3.1{{ property_prefix("-webkit") }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Note: Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve the similar effect.

See also

{{ languages( { "ja": "ja/CSS/-moz-transform-origin", "fr":"fr/CSS/transform-origin" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The <code>transform-origin</code> CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the <code>rotate()</code> 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.)</p>
<nobr>
<style type="text/css"><![CDATA[.cssprop {
  display:table;
  padding: 0.4em;
  border-left:0.15em solid;
  background-color:#eeeeff
}
.cssprop li {
 display:table-row;
 padding: 3px;
 margin:0;
}
.cssprop li dfn {
  display:table-cell;
  padding: 0 5px;
  border-bottom: none;
  cursor:inherit;
}





]]></style>
<ul class="cssprop"> <li><dfn>{{ Xref_cssinitial() }}:</dfn> <code>50% 50%</code></li> <li><dfn>Applies to:</dfn> all block level and inline level elements</li> <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li> <li><dfn>Percentages:</dfn> refer to the size of the box itself</li> <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li> <li><dfn>{{ Xref_csscomputed() }}:</dfn> for <code>&lt;length&gt;</code> the absolute value, otherwise a percentage</li>
</ul>
</nobr>
<p><nobr></nobr></p><nobr>
<h2>Syntax</h2>
<pre class="eval">transform-origin:  [ &lt;percentage&gt; | &lt;length&gt; | left | center | right ]
                   [ &lt;percentage&gt; | &lt;length&gt; | top | center | bottom ] ?
</pre>
<pre>transform-origin:  [ left | center | right ] || [ top | center | bottom ]
</pre>
<h3>Values</h3>
<p>Accepts one or two values.</p>
<ul> <li>One single value sets the horizontal position, the vertical position is set to <code>50%</code>.</li> <li>Two values apply first to the horizontal and second to the vertical position.</li>
</ul>
<p>Combinations are allowed of keyword, {{ Xref_csslength() }}, or {{ Xref_csspercentage() }} values, but if keywords are mixed with other values, <code>left</code> and <code>right</code> may only be used as the first value, and <code>top</code> and <code>bottom</code> may only be used as the second value. Negative positions are allowed.</p>
<dl> <dt>&lt;percentage&gt;</dt> <dd>With a value pair of <code>0% 0%</code>, (or just <code>0 0</code>) the transform-origin is the upper left corner of the box. A value pair of <code>100% 100%</code> places the transform-origin to the lower right corner. With a value pair of <code>14% 84%</code>, the point 14% across and 84% down the box is the transform-origin.</dd> <dt>&lt;length&gt;</dt> <dd>With a value pair of e.g. <code>2cm 1cm</code>, the transform-origin is placed 2cm to the right and 1cm below the upper left corner of the element.</dd> <dt>top left | left top</dt> <dd>Same as <code>0 0</code></dd> <dt>top | top center | center top</dt> <dd>Same as <code>50% 0</code></dd> <dt>right top | top right</dt> <dd>Same as <code>100% 0</code></dd> <dt>left | left center | center left</dt> <dd>Same as <code>0 50%</code></dd> <dt>center | center center</dt> <dd>Same as <code>50% 50%</code> (default value)</dd> <dt>right | right center | center right</dt> <dd>Same as <code>100% 50%</code></dd> <dt>bottom left | left bottom</dt> <dd>Same as <code>0 100%</code></dd> <dt>bottom | bottom center | center bottom</dt> <dd>Same as <code>50% 100%</code></dd> <dt>bottom right | right bottom</dt> <dd>Same as <code>100% 100%</code></dd>
</dl>
<h2>Examples</h2>
<p>See <a class="internal" href="/En/CSS/Using_CSS_transforms" title="en/CSS/Using CSS transforms">Using CSS transforms</a> for examples.</p>
<h3>Live Examples</h3>
<table class="standard-table"> <tbody> <tr> <td style="width:22em"><code>transform: none;</code></td> <td> </td> </tr> <tr> <td><code>transform: rotate(30deg);</code></td> <td> </td> </tr> <tr> <td><code>transform: rotate(30deg);<br> transform-origin: 0 0;</code></td> <td> </td> </tr> <tr> <td><code>transform: rotate(30deg);<br> transform-origin: 100% 100%;</code></td> <td> </td> </tr> <tr> <td><code>transform: rotate(30deg);<br> transform-origin: -10em -30em;</code></td> <td> </td> </tr> <tr style="height:5em"> <td><code>transform: scale(1.9);</code></td> <td> </td> </tr> <tr style="height:5em"> <td><code>transform: scale(1.9);<br> transform-origin: 0 0;</code></td> <td> </td> </tr> <tr style="height:5em"> <td><code>transform: scale(1.9);<br> transform-origin: 100% -30%;</code></td> <td> </td> </tr> <tr> <td><code>transform: skew(50deg);</code></td> <td> </td> </tr> <tr> <td><code>transform: skew(50deg);<br> transform-origin: 0 0;</code></td> <td> </td> </tr> <tr> <td><code>transform: skew(50deg);<br> transform-origin: 100% 100%;</code></td> <td> </td> </tr> </tbody>
</table>
<h2>Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://dev.w3.org/csswg/css3-transforms/#transform-origin-property" title="http://dev.w3.org/csswg/css3-transforms/#transform-origin-property">CSS Transforms</a></td> <td>{{ Spec2('CSS3 Transforms') }}</td> <td> </td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td> <td>{{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td> <td>10.0<br> 9.0{{ property_prefix("-ms") }}</td> <td>10.5{{ property_prefix("-o") }}</td> <td>3.1{{ property_prefix("-webkit") }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Chrome for Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<div class="note"><strong>Note</strong>: Internet Explorer 5.5 or later supports a proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Matrix Filter</a> which can be used to achieve the similar effect.</div>
<h2>See also</h2>
<ul> <li>{{ cssxref("transform") }}</li> <li><a class="internal" href="/En/CSS/Using_CSS_transforms" title="en/CSS/Using CSS transforms">Using CSS transforms</a></li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/-moz-transform-origin", "fr":"fr/CSS/transform-origin" } ) }}</p></nobr>
Revert to this revision