transform

  • Revision slug: CSS/transform
  • Revision title: transform
  • Revision id: 21737
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 32 words added

Revision Content

{{ CSSRef() }}

Summary

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

  • {{ xref_cssinitial() }}: none
  • Applies to: all block level and inline level elements
  • {{ xref_cssinherited() }}: no
  • Media: {{ xref_cssvisual() }}
  • {{ xref_csscomputed() }}:

Syntax

transform:  <transform-function> [<transform-function>]* | none

Vendor prefixes: See the compatibility table below for detail on the vendor prefixes you'll need to use for this feature.

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;

    -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%;
}



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: Gecko (Firefox) accepts a {{ xref_csslength() }} value for tx and ty.
Webkit (Safari, Chrome) and Opera currently support a unitless {{ xref_cssnumber() }} for tx and ty.

Live Examples

 

 

 background: gold;  width: 30em;

    -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: wheat;
 max-width: intrinsic;

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


See also

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 {{ non_standard_inline() }}

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

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

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

skewX

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

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

skewY

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

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

translate

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

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

translateX

transform:  translateX(tx)       /* see <length> for possible values */

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

translateY

transform:  translateY(ty)       /* see <length> for possible values */

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

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }} yes {{ property_prefix("-webkit") }} 9.0{{ property_prefix("-ms") }} 10.5{{ property_prefix("-o") }} 3.1{{ property_prefix("-webkit") }}
3D Support 10.0{{ property_prefix("-moz") }} 12.0{{ property_prefix("-webkit") }} 10.0{{ property_prefix("-ms") }} no 4.0{{ property_prefix("-webkit") }}
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Notes

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

Specifications

  • {{ spec("http://www.w3.org/TR/css3-2d-transforms/#transform-property", "CSS 2D Transforms Module Level 3: transform", "WD") }}

See also

 

{{ languages( {"en": "en/CSS/-moz-transform", "ja": "ja/CSS/-moz-transform" ,"zh-cn": "cn/CSS/transform" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The <code>transform</code> CSS 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>
<ul> <li>{{ xref_cssinitial() }}: none</li> <li>Applies to: all block level and inline level elements</li> <li>{{ xref_cssinherited() }}: no</li> <li>Media: {{ xref_cssvisual() }}</li> <li>{{ xref_csscomputed() }}:</li>
</ul>
<h2>Syntax</h2>
<pre>transform:  &lt;transform-function&gt; [&lt;transform-function&gt;]* | none</pre>
<p><strong>Vendor prefixes:</strong> See the compatibility table below for detail on the vendor prefixes you'll need to use for this feature.</p>
<h2>Values</h2>
<dl> <dt>transform-function</dt> <dd>One or more of the {{ anch("CSS transform functions") }} to be applied, see below.</dd> <dt>none</dt> <dd>Specifies that no transform should be applied.</dd>
</dl>
<h2>Examples</h2>
<p>See <a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using_CSS_transforms">Using CSS transforms</a>.</p>
<h4>Live Example</h4>
<p> </p>
<p> </p>
<p> </p>
<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;

    -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>
<h2><br> <br> 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>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> Gecko (Firefox) accepts a {{ xref_csslength() }} value for <strong>tx</strong> and <strong>ty</strong>.<br> Webkit (Safari, Chrome) and Opera currently support a unitless {{ xref_cssnumber() }} for <strong>tx</strong> and <strong>ty</strong>.</div>
<h4>Live Examples</h4>
<p> </p>
<p> </p>
<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;

    -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);
</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;

    -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);
</pre>
<h4><br> See also</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>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>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>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>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>skew {{ non_standard_inline() }}</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 around 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">The <code>skew()</code> function was present in early drafts. It has been removed and is still present in some prefixed implementations. Do not use it.</div><h3>skewX</h3>
<pre class="eval">transform:  skewX(angle)         /* an &lt;angle&gt;, e.g.  skewX(-30deg) */</pre>
<p>Skews the element around the X axis by the given <code>angle</code>.</p>
<h3>skewY</h3>
<pre class="eval">transform:  skewY(angle)         /* an &lt;angle&gt;, e.g.  skewY(4deg) */</pre>
<p>Skews the element around the Y axis by the given <code>angle</code>.</p>
<h3>translate</h3>
<pre class="eval">transform:  translate(tx[, ty])  /* one or two &lt;length&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>
<h3>translateX</h3>
<pre class="eval">transform:  translateX(tx)       /* see &lt;length&gt; for possible values */</pre>
<p>Translates the element by the given amount along the X axis.</p>
<h3>translateY</h3>
<pre class="eval">transform:  translateY(ty)       /* see &lt;length&gt; for possible values */</pre>
<p>Translates the element by the given amount along the Y axis.</p>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox (Gecko)</th> <th>Chrome</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td> <td>yes {{ property_prefix("-webkit") }}</td> <td>9.0{{ property_prefix("-ms") }}</td> <td>10.5{{ property_prefix("-o") }}</td> <td>3.1{{ property_prefix("-webkit") }}</td> </tr> <tr> <td>3D Support</td> <td>10.0{{ property_prefix("-moz") }}</td> <td>12.0{{ property_prefix("-webkit") }}</td> <td>10.0{{ property_prefix("-ms") }}</td> <td>no</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>iOS Safari</th> <th>Opera Mini</th> <th>Opera Mobile</th> <th>Android Browser</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3>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 the similar effect.</p>
<h2>Specifications</h2>
<ul> <li>{{ spec("http://www.w3.org/TR/css3-2d-transforms/#transform-property", "CSS 2D Transforms Module Level 3: transform", "WD") }}</li>
</ul>
<h2>See also</h2>
<ul> <li>{{ cssxref("transform-origin") }}</li> <li><a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using_CSS_transforms">Using CSS transforms</a></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>
<p> </p>
<p>{{ languages( {"en": "en/CSS/-moz-transform", "ja": "ja/CSS/-moz-transform" ,"zh-cn": "cn/CSS/transform" } ) }}</p>
Revert to this revision