files/pt-pt/web/css/usando_transformações_css/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

---
title: CSS/Usando_transformações_CSS
slug: Web/CSS/Usando_transformações_CSS
translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
---
<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>Firefox 3.5 (Gecko 1.9.1) introduz suporte a transformações CSS; estas são implementadas utilizando um conjunto de propriedades CSS permitindo a você aplicar transformações lineares a elementos HTML. Essas transformações são baseadas sobre o <a class="external" href="http://webkit.org/blog/130/css-transforms/" title="http://webkit.org/blog/130/css-transforms/">design proposto pelo time WebKit</a> e incluem rotar, inclinar, escalar e usar translação. Enquanto isso, é um <a class="external" href="http://www.w3.org/TR/css3-2d-transforms/" title="http://www.w3.org/TR/css3-2d-transforms/">W3C working draft</a>.</p>
<p>Mozilla atualmente suporta as propriedades {{ Cssxref("-moz-transform") }} e {{ Cssxref("-moz-transform-origin") }}. Para detalhes sobre onde funções de transformação são suportadas, veja o artigo <a class="internal" href="/En/CSS/CSS_transform_functions" title="/en/CSS/CSS transform functions">CSS transform functions</a> (en).</p>
<div class="note">
 <strong>Nota:</strong> Até o momento não há suporte ao eixo Z, portanto, perspectiva, rotação 3D, escala 3D, e transformações 3D não são suportadas.</div>
<h2 id="Exemplo_Rotação">Exemplo: Rotação</h2>
<p>Este exemplo cria um <em>iframe</em> que lhe permite utilizar a página inicial do Google, girada 90 graus sobre seu canto inferior esquerdo.</p>
<p><a class="internal" href="/@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">Visualizar exemplo</a><br>
 <a class="internal" href="/@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">Visualizar <em>screenshot</em> do exemplo</a></p>
<pre class="brush: html">&lt;div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;"&gt;
  &lt;iframe src="http://www.google.com/" width="500px" height="600px" /&gt;
&lt;/div&gt;
</pre>
<h2 id="Exemplo_Inclinação_e_translação">Exemplo: Inclinação e translação</h2>
<p>Este exemplo cria um iframe que lhe permite utilizar a página inicial do Google, inclinada 10 graus no eicho X.</p>
<p><a class="external" href="/@api/deki/files/2922/=skewed-google-sample.html" title="http://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">Visualizar exemplo</a><br>
 <a class="internal" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">Visualizar <em>screenshot</em> do exemplo</a></p>
<pre class="brush: html">&lt;div style="-moz-transform: skewx(10deg) translatex(150px);
            -moz-transform-origin: bottom left;"&gt;
  &lt;iframe src="http://www.google.com/" width="600px" height="500px" /&gt;
&lt;/div&gt;
</pre>
<h2 id="Veja_também">Veja também</h2>
<ul>
 <li>{{ Cssxref("-moz-transform") }}</li>
 <li>{{ Cssxref("-moz-transform-origin") }}</li>
 <li><a class="internal" href="/En/CSS/CSS_transform_functions" title="En/CSS/CSS transform functions">CSS transform functions</a> (EN)</li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/Using_CSS_transforms" } ) }}</p>