aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/css/css_transforms/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/pt-br/web/css/css_transforms/index.html')
-rw-r--r--files/pt-br/web/css/css_transforms/index.html145
1 files changed, 145 insertions, 0 deletions
diff --git a/files/pt-br/web/css/css_transforms/index.html b/files/pt-br/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..56f6df6745
--- /dev/null
+++ b/files/pt-br/web/css/css_transforms/index.html
@@ -0,0 +1,145 @@
+---
+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>