transform-origin

  • Revision slug: CSS/transform-origin
  • Revision title: transform-origin
  • Revision id: 361481
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

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.)

Not explicitely set values are reset to their corresponding values.

{{cssbox("transform-origin")}}

Syntax

Formal syntax: {{csssyntax("transform-origin")}}
transform-origin: x-offset                                   /* One-value syntax */   E.g.  transform-origin: 2px 
transform-origin: offset-keyword                                                      E.g.  transform-origin: bottom

transform-origin: x-offset y-offset                          /* Two-value syntax */   E.g.  transform-origin: 3cm 2px
transform-origin: y-offset x-offset-keyword                                           E.g.  transform-origin: 2px left
transform-origin: x-offset-keyword y-offset                                           E.g.  transform-origin: left 2px
transform-origin: x-offset-keyword y-offset-keyword                                   E.g.  transform-origin: right top
transform-origin: y-offset-keyword x-offset-keyword                                   E.g.  transform-origin: top right

transform-origin: x-offset y-offset z-offset                 /* Three-value syntax */ E.g.  transform-origin: 2px 30% 10px
transform-origin: y-offset x-offset-keyword z-offset                                  E.g.  transform-origin: 2px left 10px
transform-origin: x-offset-keyword y-offset z-offset                                  E.g.  transform-origin: left 5px -3px
transform-origin: x-offset-keyword y-offset-keyword z-offset                          E.g.  transform-origin: right bottom 2cm
transform-origin: y-offset-keyword x-offset-keyword z-offset                          E.g.  transform-origin: bottom right 2cm

Values

x-offset
Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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 or center keyword describing the corresponding offset.
y-offset
Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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 or center 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 or center keyword describing how far from the top edge of the box the origin of the transform is set.
z-offset
Is a {{ xref_csslength() }} (and never a {{ xref_csspercentage() }} which would made 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 {{ xref_csspercentage() }} values:

keyword value
left 0%
center 50%
right 100%
top 0%
bottom 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: skewX(50deg);
 
transform: skewY(50deg);
transform-origin: 0 0;
 

Specifications

Specification Status Comment
{{ SpecName('CSS3 Transforms', '#transform-origin', '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") }}
10.0 {{ CompatNo() }} {{ CompatVersionUnknown() }} {{ 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() }}
Three-value syntax {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }}
Note: Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve similar effects.

See also

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">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>
<p>Not explicitely set values are reset to their corresponding values.</p>
<p>{{cssbox("transform-origin")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("transform-origin")}}
</pre>
<pre>
transform-origin: <em>x-offset</em>                                   /* One-value syntax */   E.g.  transform-origin: 2px 
transform-origin: <em>offset-keyword</em>                                                      E.g.  transform-origin: bottom

transform-origin: <em>x-offset</em> <em>y-offset</em>                          /* Two-value syntax */   E.g.  transform-origin: 3cm 2px
transform-origin: <em>y-offset</em> <em>x-offset-keyword</em>                                           E.g.  transform-origin: 2px left
transform-origin: <em>x-offset-keyword</em> <em>y-offset</em>                                           E.g.  transform-origin: left 2px
transform-origin: x-<em>offset-keyword</em> <em>y-offset-keyword</em>                                   E.g.  transform-origin: right top
transform-origin: <em>y-offset-keyword</em> <em>x-offset-keyword</em>                                   E.g.  transform-origin: top right

transform-origin: <em>x-offset</em> <em>y-offset</em> <em>z-offset</em>                 /* Three-value syntax */ E.g.  transform-origin: 2px 30% 10px
transform-origin: <em>y-offset</em> <em>x-offset-keyword</em> <em>z-offset</em>                                  E.g.  transform-origin: 2px left 10px
transform-origin: <em>x-offset-keyword</em> <em>y-offset</em> <em>z-offset</em>                                  E.g.  transform-origin: left 5px -3px
transform-origin: x-<em>offset-keyword</em> <em>y-offset-keyword z-offset</em>                          E.g.  transform-origin: right bottom 2cm
transform-origin: <em>y-offset-keyword</em> <em>x-offset-keyword z-offset</em>                          E.g.  transform-origin: bottom right 2cm
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <em>x-offset</em></dt>
  <dd>
    Is a {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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 {{ xref_csslength() }} or a {{ xref_csspercentage() }} 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 {{ xref_csslength() }} (and never a {{ xref_csspercentage() }} which would made 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 {{ xref_csspercentage() }} 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>
<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>
      <td style="width:22em"><code>transform: none;</code></td>
      <td>
        <div style="margin:0.5em; width:3em; height:3em; border-style:solid 1px; background-color:palegreen;transform: none;">
          &nbsp;</div>
      </td>
    </tr>
    <tr>
      <td><code>transform: rotate(30deg);</code></td>
      <td>
        <div style="margin:0.5em; width:3em; height:3em; border-style:solid 1px; background-color:palegreen;transform: rotate(30deg);">
          &nbsp;</div>
      </td>
    </tr>
    <tr>
      <td><code>transform: rotate(30deg);<br />
        transform-origin: 0 0;</code></td>
      <td>
        <div style="margin:0.5em; width:3em; height:3em; border-style:solid 1px; background-color:palegreen;transform: rotate(30deg);transform-origin: 0 0;">
          &nbsp;</div>
      </td>
    </tr>
    <tr>
      <td><code>transform: rotate(30deg);<br />
        transform-origin: 100% 100%;</code></td>
      <td>
        <div style="margin:0.5em; width:3em; height:3em; border-style:solid 1px; background-color:palegreen;transform: rotate(30deg);transform-origin: 100% 100%;">
          &nbsp;</div>
      </td>
    </tr>
    <tr>
      <td><code>transform: rotate(30deg);<br />
        transform-origin: -10em -30em;</code></td>
      <td>
        <div style="margin:0.5em; width:3em; height:3em; border-style:solid 1px; background-color:palegreen;transform: rotate(30deg);transform-origin: -10em -30em;">
          &nbsp;</div>
      </td>
    </tr>
    <tr style="height:5em">
      <td><code>transform: scale(1.9);</code></td>
      <td>
        <div style="margin:0.5em; width:3em; height:3em; border-style:solid 1px; background-color:palegreen;transform: scale(1.9);">
          &nbsp;</div>
      </td>
    </tr>
    <tr style="height:5em">
      <td><code>transform: scale(1.9);<br />
        transform-origin: 0 0;</code></td>
      <td>
        <div style="margin:0.5em; width:3em; height:3em; border-style:solid 1px; background-color:palegreen;transform: scale(1.9);transform-origin: 0 0;">
          &nbsp;</div>
      </td>
    </tr>
    <tr style="height:5em">
      <td><code>transform: scale(1.9);<br />
        transform-origin: 100% -30%;</code></td>
      <td>
        <div style="margin:0.5em; width:3em; height:3em; border-style:solid 1px; background-color:palegreen;transform: scale(1.9);transform-origin: 100% -30%;">
          &nbsp;</div>
      </td>
    </tr>
    <tr>
      <td><code>transform: skewX(50deg);</code></td>
      <td>
        <div style="margin:0.5em; width:3em; height:3em; border-style:solid 1px; background-color:palegreen;transform: skewX(50deg)">
          &nbsp;</div>
      </td>
    </tr>
    <tr>
      <td><code>transform: skewY(50deg);<br />
        transform-origin: 0 0;</code></td>
      <td>
        <div style="margin:0.5em; width:3em; height:3em; border-style:solid 1px; background-color:palegreen;transform: skewY(50deg);transform-origin: 0 0">
          &nbsp;</div>
      </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', '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>10.0</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }} {{ 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>
      <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>
    </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 similar effects.</div>
<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>
  <li>{{ CSS_Reference:Transforms() }}</li>
</ul>
Revert to this revision