transform

  • Revision slug: Web/CSS/transform
  • Revision title: transform
  • Revision id: 479141
  • Created:
  • Creator: kaustavdm
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef("CSS Transforms") }}

{{ SeeCompatTable() }}

Summary

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.

If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.

{{cssbox("transform")}}

Syntax

Formal syntax: {{csssyntax("transform")}}
transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

transform: translateX(10px) rotate(10deg) translateY(5px)

Values

<transform-function>
One or more of the {{ anch("CSS transform functions") }} to be applied, see below.
none
Specifies that no transform should be applied.

Examples

See Using CSS transforms.

Live Example

pre {
     width: 33em;
     border: solid red;

    -webkit-transform: translate(100px) rotate(20deg);
    -webkit-transform-origin: 60% 100%;

    -o-transform:translate(100px) rotate(20deg); 
    -o-transform-origin:60% 100%;

    transform: translate(100px) rotate(20deg);
    transform-origin: 60% 100%;
}

CSS transform functions

The transform CSS property allows the coordinate system used by an element to be manipulated using transform functions. These functions are described below.

matrix

transform:  matrix(a, c, b, d, tx, ty)

/* Where a, b, c, d build the transformation matrix 
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
   and tx, ty are the translate values.  */

Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation matrix [a b c d tx ty].

Note: Older versions of Gecko (Firefox) accepted a {{ xref_csslength() }} value for tx and ty. Current Gecko, along with Webkit (Safari, Chrome) and Opera, supports a unitless {{ xref_cssnumber() }} for tx and ty.

Live examples

 background: gold;  width: 30em;

 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
 background: wheat;
 max-width: intrinsic;

 -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
         transform: matrix(1, 0, 0.6, 1,  250, 0);

Further knowledge

rotate

transform:  rotate(angle);       /* an <angle>, e.g., rotate(30deg) */

Rotates the element clockwise around its origin (as specified by the {{ Cssxref("transform-origin") }} property) by the specified angle. The operation corresponds to the matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

scale

transform:  scale(sx[, sy]);     /* one or two unitless <number>s, e.g., scale(2.1,4) */

Specifies a 2D scaling operation described by [sx, sy]. If sy isn't specified, it is assumed to be equal to sx.

scaleX

transform:  scaleX(sx);          /* a unitless <number>, e.g., scaleX(2.7) */

Specifies a scale operation using the vector [sx, 1].

scaleY

transform:  scaleY(sy)           /* a unitless <number>, e.g., scaleY(0.3) */

Specifies a scale operation using the vector [1, sy].

skew

transform:  skew(ax[, ay])       /* one or two <angle>s, e.g., skew(30deg,-10deg) */

Skews the element along the X and Y axes by the specified angles. If ay isn't provided, no skew is performed on the Y axis.

Note: The skew() function was present in early drafts. It has been removed but is still present in some implementations. Do not use it.

To achieve the same effect, use skewX() if you were using skew() with one parameter or matrix(1, tan(ay), tan(ax), 1, 0, 0) for the general way. Note that tan() isn't a CSS function and you have to precalculate it yourself.

skewX

transform:  skewX(angle)         /* an <angle>, e.g., skewX(-30deg) */

Skews the element along the X axis by the given angle.

skewY

transform:  skewY(angle)         /* an <angle>, e.g., skewY(4deg) */

Skews the element along the Y axis by the given angle.

translate

transform:  translate(tx[, ty])  /* one or two <translation-value> values */

Specifies a 2D translation by the vector [tx, ty]. If ty isn't specified, its value is assumed to be zero.

Each <translation-value> arguments may be either a <length> value or a <percentage> value.

translateX

transform:  translateX(tx)       /* <translation-value> */

Translates the element by the given amount along the X axis.

translateY

transform:  translateY(ty)       /* <translation-value> */

Translates the element by the given amount along the Y axis.

Specifications

Specification Status Comment
{{ SpecName('CSS3 Transforms', '#transform', 'transform') }} {{ 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") }}
3D Support 12.0{{ property_prefix("-webkit") }} 10.0{{ property_prefix("-moz") }}
{{ CompatGeckoDesktop("16.0") }}
10.0 {{ CompatNo() }} 4.0{{ 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() }}
3D Support 2.3 {{ property_prefix("-webkit") }}          

Notes

Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

Android 2.3 has a bug where input forms will "jump" when typing, if any container div has a -webkit-transform.

See also

Revision Source

<p>{{ CSSRef("CSS Transforms") }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<p>The CSS <code>transform</code> property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.</p>
<p>If the property has a value different than <code>none</code>, a <a href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context" title="/en-US/docs/CSS/Understanding_z-index/The_stacking_context">stacking context</a> will be created. In that case the object will act as a containing block for <code>position</code><code>: fixed</code> elements that it contains.</p>
<p>{{cssbox("transform")}}</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")}}
</pre>
<pre>
transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)

transform: translateX(10px) rotate(10deg) translateY(5px)
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;transform-function&gt;</code></dt>
  <dd>
    One or more of the {{ anch("CSS transform functions") }} to be applied, see below.</dd>
  <dt>
    <code>none</code></dt>
  <dd>
    Specifies that no transform should be applied.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>See <a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using_CSS_transforms">Using CSS transforms</a>.</p>
<h3 id="Live_Example">Live Example</h3>
<pre style="width:33em; border:solid red; -moz-transform:translate(100px) rotate(20deg); -moz-transform-origin:60% 100%; -webkit-transform:translate(100px) rotate(20deg); -webkit-transform-origin:60% 100%; -o-transform:translate(100px) rotate(20deg); -o-transform-origin:60% 100%; -ms-transform:translate(100px) rotate(20deg); -ms-transform-origin:60% 100%; transform:translate(100px) rotate(20deg); transform-origin:60% 100%;">
pre {
     width: 33em;
     border: solid red;

    -webkit-transform: translate(100px) rotate(20deg);
    -webkit-transform-origin: 60% 100%;

    -o-transform:translate(100px) rotate(20deg); 
    -o-transform-origin:60% 100%;

    transform: translate(100px) rotate(20deg);
    transform-origin: 60% 100%;
}
</pre>
<h2 id="CSS_transform_functions">CSS transform functions</h2>
<p>The <code>transform</code> CSS property allows the coordinate system used by an element to be manipulated using <strong>transform functions</strong>. These functions are described below.</p>
<h3 id="matrix">matrix</h3>
<pre>
transform:  matrix(a, c, b, d, tx, ty)

/* Where a, b, c, d build the transformation matrix 
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
   and tx, ty are the translate values.  */
</pre>
<p>Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation <strong>matrix [a b c d tx ty]</strong>.</p>
<div class="note">
  <strong>Note:</strong> Older versions of Gecko (Firefox) accepted a {{ xref_csslength() }} value for <strong>tx</strong> and <strong>ty</strong>. Current Gecko, along with Webkit (Safari, Chrome) and Opera, supports a unitless {{ xref_cssnumber() }} for <strong>tx</strong> and <strong>ty</strong>.</div>
<h4 id="Live_examples">Live examples</h4>
<pre style="background:gold; width:400px; -moz-transform:matrix(1, -0.2, 0, 1, 0, 0); -webkit-transform:matrix(1, -0.2, 0, 1, 0, 0);-o-transform:matrix(1, -0.2, 0, 1, 0, 0);-ms-transform:matrix(1, -0.2, 0, 1, 0, 0); transform:matrix(1, -0.2, 0, 1, 0, 0);">
 background: gold;  width: 30em;

 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
</pre>
<pre style="background:wheat; max-width:intrinsic; max-width:-moz-fit-content; -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); -o-transform: matrix(1, 0, 0.6, 1, 250, 0); -ms-transform: matrix(1, 0, 0.6, 1, 250, 0); transform: matrix(1, 0, 0.6, 1, 250, 0);">
 background: wheat;
 max-width: intrinsic;

 -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
         transform: matrix(1, 0, 0.6, 1,  250, 0);
</pre>
<h4 id="Further_knowledge">Further knowledge</h4>
<ul>
  <li><a class="external" href="http://en.wikipedia.org/wiki/Linear_transformation#Examples_of_linear_transformation_matrices">Examples of linear transformation matrices</a> Wikipedia</li>
  <li><a class="external" href="http://www.mathamazement.com/Lessons/Pre-Calculus/08_Matrices-and-Determinants/coordinate-transformation-matrices.html">Coordinate transformation matrices</a> mathamazement.com</li>
  <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Microsoft's matrix filter</a> MSDN</li>
</ul>
<h3 id="rotate">rotate</h3>
<pre class="eval">
transform:  rotate(angle);       /* an &lt;angle&gt;, e.g., rotate(30deg) */</pre>
<p>Rotates the element clockwise around its origin (as specified by the {{ Cssxref("transform-origin") }} property) by the specified <code>angle</code>. The operation corresponds to the matrix <strong>[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]</strong>.</p>
<h3 id="scale">scale</h3>
<pre class="eval">
transform:  scale(sx[, sy]);     /* one or two unitless &lt;number&gt;s, e.g., scale(2.1,4) */</pre>
<p>Specifies a 2D scaling operation described by <strong>[sx, sy]</strong>. If <code>sy</code> isn't specified, it is assumed to be equal to <code>sx</code>.</p>
<h3 id="scaleX">scaleX</h3>
<pre class="eval">
transform:  scaleX(sx);          /* a unitless &lt;number&gt;, e.g., scaleX(2.7) */</pre>
<p>Specifies a scale operation using the vector <strong>[sx, 1]</strong>.</p>
<h3 id="scaleY">scaleY</h3>
<pre class="eval">
transform:  scaleY(sy)           /* a unitless &lt;number&gt;, e.g., scaleY(0.3) */</pre>
<p>Specifies a scale operation using the vector <strong>[1, sy]</strong>.</p>
<h3 id="skew">skew</h3>
<pre class="eval">
transform:  skew(ax[, ay])       /* one or two &lt;angle&gt;s, e.g., skew(30deg,-10deg) */</pre>
<p>Skews the element along the X and Y axes by the specified angles. If <code>ay</code> isn't provided, no skew is performed on the Y axis.</p>
<div class="note">
  <strong>Note:</strong> The <code>skew()</code> function was present in early drafts. It has been removed but is still present in some implementations. Do not use it.<br />
  <br />
  To achieve the same effect, use <code>skewX()</code> if you were using <code>skew()</code> with one parameter or <code>matrix(1, <em>tan(</em>ay<em>)</em></code><em>, </em><code><em>tan(</em>ax<em>)</em>, 1, 0, 0)</code> for the general way. Note that <em>tan()</em> isn't a CSS function and you have to precalculate it yourself.</div>
<h3 id="skewX">skewX</h3>
<pre class="eval">
transform:  skewX(angle)         /* an &lt;angle&gt;, e.g., skewX(-30deg) */</pre>
<p>Skews the element along the X axis by the given <code>angle</code>.</p>
<h3 id="skewY">skewY</h3>
<pre class="eval">
transform:  skewY(angle)         /* an &lt;angle&gt;, e.g., skewY(4deg) */</pre>
<p>Skews the element along the Y axis by the given <code>angle</code>.</p>
<h3 id="translate">translate</h3>
<pre class="eval">
transform:  translate(tx[, ty])  /* one or two &lt;translation-value&gt; values */</pre>
<p>Specifies a 2D translation by the vector <strong>[tx, ty]</strong>. If <code>ty</code> isn't specified, its value is assumed to be zero.</p>
<p>Each <a href="/en-US/docs/translation-value" title="/en-US/docs/translation-value"><code>&lt;translation-value&gt;</code></a> arguments may be either a <code><a href="/en-US/docs/CSS/length" title="/en-US/docs/CSS/length">&lt;length&gt;</a></code> value or a <code><a href="/en-US/docs/CSS/percentage" title="/en-US/docs/CSS/percentage">&lt;percentage&gt;</a></code> value.</p>
<h3 id="translateX">translateX</h3>
<pre class="eval">
transform:  translateX(tx)       /* &lt;translation-value&gt; */</pre>
<p>Translates the element by the given amount along the X axis.</p>
<h3 id="translateY">translateY</h3>
<pre class="eval">
transform:  translateY(ty)       /* &lt;translation-value&gt; */</pre>
<p>Translates the element by the given amount along the Y axis.</p>
<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', 'transform') }}</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>3D Support</td>
        <td>12.0{{ property_prefix("-webkit") }}</td>
        <td>10.0{{ property_prefix("-moz") }}<br />
          {{ CompatGeckoDesktop("16.0") }}</td>
        <td>10.0</td>
        <td>{{ CompatNo() }}</td>
        <td>4.0{{ 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>3D Support</td>
        <td>2.3 {{ property_prefix("-webkit") }}</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes">Notes</h3>
<p>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">Matrix Filter</a> which can be used to achieve a similar effect.</p>
<p>Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.</p>
<p>Android 2.3 has a bug where input forms will "jump" when typing, if any container div has a -webkit-transform.</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>
  <li><a href="/en-US/docs/translation-value" title="/en-US/docs/translation-value">&lt;translation-value&gt;</a> data type</li>
  <li>{{ CSS_Reference:Transforms() }}</li>
  <li><a class="external" href="http://paulirish.com/2010/introducing-css3please/#comment-36380">More info</a> on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.</li>
  <li>A cross-browser 2D <a class="external" href="http://plugins.jquery.com/project/jquery-transform">transform plugin for jQuery</a></li>
</ul>
Revert to this revision