Revision 1046722 of transform-origin

<p>{{ CSSRef("CSS Transforms") }}</p>

<p>{{ SeeCompatTable() }}</p>

<h2 id="Summary">Summary</h2>

<p>The <code>transform-origin</code> 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>

<p>Not explicitly set values are reset to their corresponding values.</p>

<p>{{Cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css">
/* One-value syntax */
transform-origin: 2px<em>;</em>
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;
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><em>x-offset</em></dt>
 <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} describing how far from the left edge of the box the origin of the transform is set.</dd>
 <dt><em>offset-keyword</em></dt>
 <dd>Is one of the <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> or <code>center</code> keyword describing the corresponding offset.</dd>
 <dt><em>y-offset</em></dt>
 <dd>Is a {{cssxref("&lt;length&gt;")}} or a {{cssxref("&lt;percentage&gt;")}} describing how far from the top edge of the box the origin of the transform is set.</dd>
 <dt><em>x-offset-keyword</em></dt>
 <dd>Is one of the <code>left</code>, <code>right</code> or <code>center</code> keyword describing how far from the left edge of the box the origin of the transform is set.</dd>
 <dt><em>y-offset-keyword</em></dt>
 <dd>Is one of the <code>top</code>, <code>bottom</code> or <code>center</code> keyword describing how far from the top edge of the box the origin of the transform is set.</dd>
 <dt><em>z-offset</em></dt>
 <dd>Is a {{cssxref("&lt;length&gt;")}} (and never a {{cssxref("&lt;percentage&gt;")}} which would make the statement invalid) describing how far from the user eye the z=0 origin is set.</dd>
</dl>

<p>The keywords are convenience shorthands and match the following {{cssxref("&lt;percentage&gt;")}} values:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">keyword</th>
   <th scope="col">value</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>left</code></td>
   <td><code>0%</code></td>
  </tr>
  <tr>
   <td><code>center</code></td>
   <td><code>50%</code></td>
  </tr>
  <tr>
   <td><code>right</code></td>
   <td><code>100%</code></td>
  </tr>
  <tr>
   <td><code>top</code></td>
   <td><code>0%</code></td>
  </tr>
  <tr>
   <td><code>bottom</code></td>
   <td><code>100%</code></td>
  </tr>
 </tbody>
</table>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}</pre>

<h2 id="Examples">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 id="Live_Examples">Live Examples</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Code</th>
   <th>Sample</th>
  </tr>
  <tr>
   <td>
    <p><code>transform: none;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_none">
    <pre class="brush: html">
&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.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;
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_none', '', '', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate_only">
    <pre class="brush: html">
&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.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);
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_rotate_only', '', '', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);<br />
     transform-origin: 0 0;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate">
    <pre class="brush: html">
&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.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);
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_rotate', '', '', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);<br />
     transform-origin: 100% 100%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate_with_percentage">
    <pre class="brush: html">
&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.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);
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_rotate_with_percentage', '', '', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);<br />
     transform-origin: -10em -30em;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate_with_em">
    <pre class="brush: html">
&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.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);
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_rotate_with_em', '', '', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: scale(1.9);</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_scale_only">
    <pre class="brush: html">
&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.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);
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_scale_only', '', '', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: scale(1.9);<br />
     transform-origin: 0 0;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_scale_without_origin">
    <pre class="brush: html">
&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.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;
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_scale_without_origin', '', '', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: scale(1.9);<br />
     transform-origin: 100% -30%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_scale">
    <pre class="brush: html">
&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.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%;
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_scale', '', '', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: skewX(50deg);<br />
     transform-origin: 100% -30%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_skew_x">
    <pre class="brush: html">
&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.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);
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_skew_x', '', '', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: skewY(50deg);<br />
     transform-origin: 100% -30%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_skew_y">
    <pre class="brush: html">
&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.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%;
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_skew_y', '', '', '', '', 'no-button') }}</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin') }}</td>
   <td>{{ Spec2('CSS3 Transforms') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">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") }}<br />
    {{ CompatGeckoDesktop("16.0") }}</td>
   <td>9.0{{ property_prefix("-ms") }}<br />
    10.0</td>
   <td>10.5{{ property_prefix("-o") }}<br />
    12.10</td>
   <td>3.1{{ property_prefix("-webkit") }}</td>
  </tr>
  <tr>
   <td>Three-value syntax</td>
   <td>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td>
   <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }}<br />
    {{ CompatGeckoDesktop("16.0") }}</td>
   <td>5.5 (partial) [1]<br />
    9.0 {{property_prefix("-ms")}}<br />
    10.0</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td>
  </tr>
  <tr>
   <td>Support in SVG</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("41")}}[3]<br />
    {{CompatGeckoDesktop("43")}}[4]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</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>8.1 {{ property_prefix("-webkit")}} [2]</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Three-value syntax</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Support in SVG</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("41")}} [3]<br />
    {{CompatGeckoDesktop("43")}} [4]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Internet Explorer 5.5 or later supports a proprietary <a href="https://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">Matrix Filter</a> which can be used to achieve similar effects.</p>

<p>[2] See <a href="https://msdn.microsoft.com/en-us/library/ie/jj127313(v=vs.85).aspx">MSDN transform-origin documentation</a>.</p>

<p>[3] Percentage handling for <code>transform-origin</code> values for SVG elements was behind the preference <code>svg.transform-origin.enabled</code>, defaulting to <code>false</code>. Keywords and percentages refer to the canvas instead of the object itself. See {{bug("1209061")}}.</p>

<p>[4] Keywords and percentages refer to the canvas instead of the object itself. See {{bug("1209061")}}.</p>

<p>{{ EmbedCompatTable("web-css-transform-origin") }}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/CSS/Using_CSS_transforms">Using CSS Transforms</a></li>
</ul>