---
title: CSS Transforms
slug: Web/CSS/CSS_Transforms
translation_of: Web/CSS/CSS_Transforms
---
<p>{{CSSRef}}{{SeeCompatTable}}</p>

<p><strong>CSS Transforms</strong> is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.</p>

<h2 id="Referencia">Referencia</h2>

<h3 id="CSS_Properties">CSS Properties</h3>

<div class="index">
<ul>
 <li>{{cssxref("backface-visibility")}}</li>
 <li>{{cssxref("perspective")}}</li>
 <li>{{cssxref("perspective-origin")}}</li>
 <li>{{cssxref("transform")}}</li>
 <li>{{cssxref("transform-box")}}</li>
 <li>{{cssxref("transform-origin")}}</li>
 <li>{{cssxref("transform-style")}}</li>
</ul>
</div>

<h2 id="Guides">Guides</h2>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS transforms</a></dt>
 <dd>Step-by-step tutorial about how to transform elements styled with CSS.</dd>
</dl>

<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') }}</td>
   <td>{{ Spec2('CSS3 Transforms') }}</td>
   <td>Initial definition.</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>
    <p>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br>
     36</p>
   </td>
   <td>{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}<sup>[1]</sup><br>
    {{CompatGeckoDesktop("16.0")}}<sup>[2]</sup></td>
   <td>9.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
    10.0</td>
   <td>10.5{{property_prefix("-o")}}<br>
    12.10<br>
    15.0{{property_prefix("-webkit")}}<br>
    23</td>
   <td>3.1{{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td>3D Support</td>
   <td>12.0{{property_prefix("-webkit")}}<br>
    36</td>
   <td>10.0{{property_prefix("-moz")}}<br>
    {{CompatGeckoDesktop("16.0")}}</td>
   <td>10.0</td>
   <td>15.0{{property_prefix("-webkit")}}<br>
    23</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>{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}<sup>[4]</sup></td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}<br>
    11.0{{property_prefix("-webkit")}}<sup>[5]</sup></td>
   <td>11.5{{property_prefix("-webkit")}}</td>
   <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td>3D Support</td>
   <td>{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}</td>
   <td>{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>22{{property_prefix("-webkit")}}</td>
   <td>3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] 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>[2] Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("&lt;length&gt;")}}, in addition to the standard {{cssxref("&lt;number&gt;")}}.</p>

<p>[3] Internet Explorer 5.5 or later supports a proprietary <a 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>Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as <code>-ms-transform:rotate(10deg) translateZ(0);</code> will prevent the entire property from being applied.</p>

<p>[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a <code>-webkit-transform</code>.</p>

<p>[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} <a href="https://msdn.microsoft.com/library/jj127312#code-snippet-1">prefixed variant as an alias for the default one</a>.</p>

<p> </p>