transform

  • Revision slug: CSS/transform
  • Revision title: transform
  • Revision id: 21724
  • Created:
  • Creator: myakura
  • Is current revision? No
  • Comment 165 words added, 144 words removed

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 as this text.

  • {{ 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.
Safari (WebKit) 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 {{ xref_cssangle() }}, e.g.  rotate(30deg) */

Rotates the element clockwise around its origin (as specified by the {{ Cssxref("-moz-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 {{ xref_cssnumber() }}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 {{ xref_cssnumber() }}, e.g.  scaleX(2.7) */

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

scaleY

transform:  scaleY(sy)           /* a unitless {{ xref_cssnumber() }}, e.g.  scaleY(0.3) */

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

skew

transform:  skew(ax[, ay])       /* one or two {{ xref_cssangle() }}, 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.

skewX

transform:  skewX(angle)         /* an {{ xref_cssangle() }}, e.g.  skewX(-30deg) */

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

skewY

transform:  skewY(angle)         /* an {{ xref_cssangle() }}, e.g.  skewY(4deg) */

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

translate

transform:  translate(tx[, ty])  /* one or two {{ xref_csslength() }} 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 {{ xref_csslength() }} for possible values */

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

translateY

transform:  translateY(ty)       /* see {{ xref_csslength() }} 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") }}
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( { "ja": "ja/CSS/-moz-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 as this text.</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">Using CSS transforms</a>.</p>
<h4>Live Example</h4>
<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>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>
Safari (WebKit) and Opera currently support a unitless {{ xref_cssnumber() }} for <strong>tx</strong> and <strong>ty</strong>.</div>
<h4>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;

    -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>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 {{ xref_cssangle() }}, e.g.  rotate(30deg) */</pre>
<p>Rotates the element clockwise around its origin (as specified by the {{ Cssxref("-moz-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 {{ xref_cssnumber() }}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 {{ xref_cssnumber() }}, 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 {{ xref_cssnumber() }}, e.g.  scaleY(0.3) */</pre>
<p>Specifies a scale operation using the vector <strong>[1, sy]</strong>.</p>
<h3>skew</h3>
<pre class="eval">transform:  skew(ax[, ay])       /* one or two {{ xref_cssangle() }}, 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>
<h3>skewX</h3>
<pre class="eval">transform:  skewX(angle)         /* an {{ xref_cssangle() }}, 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 {{ xref_cssangle() }}, 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 {{ xref_csslength() }} 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 {{ xref_csslength() }} 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 {{ xref_csslength() }} 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> </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") }}, <a href="/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>{{ languages( { "ja": "ja/CSS/-moz-transform" } ) }}</p>
Revert to this revision