initial commit

2 files changed, 367 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>
diff --git a/files/pt-br/web/css/css_transforms/using_css_transforms/index.html b/files/pt-br/web/css/css_transforms/using_css_transforms/index.html
new file mode 100644
index 0000000000..168cc81c3d
--- /dev/null
+++ b/files/pt-br/web/css/css_transforms/using_css_transforms/index.html
@@ -0,0 +1,222 @@
+---
+title: Usando CSS transforms
+slug: Web/CSS/CSS_Transforms/Using_CSS_transforms
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+<div>{{CSSRef}}</div>
+
+<p>Mudando coordenadas no espaço da tela o <strong>CSS transforms </strong>permite que a posição do conteúdo afetado seja alterada sem afetar o fluxo de informação da página. Elas são implementadas usando um conjunto de propriedades CSS que permitem alterações lineares em elementos HTML. Essas alterações incluem rotação, inclinações, alteração da escala e tradução tanto em 2D quanto em 3D.</p>
+
+<h2 id="Propriedades_de_CSS_transforms">Propriedades de CSS transforms</h2>
+
+<p>Duas propriedades principais são usadas para definir o CSS transforms: {{ cssxref("transform") }} and {{ cssxref("transform-origin") }}</p>
+
+<dl>
+ <dt>{{ cssxref("transform-origin") }}</dt>
+ <dd>Define a posição de origem do elemento. Por padrão esta posição é o canto superior esquerdo do elemento e pode ser movido. É utilizado para muitas alterações, como rotação, alteração de escala e inclinação, que precisam de um ponto especifico como parâmetro.</dd>
+ <dt>{{ cssxref("transform") }}</dt>
+ <dd>Define qual alteração será feita no elemento. Pode-se usar mais de um efeito separado-os por um espaço. Tais efeitos serão aplicados um após o outro, na ordem determinada no código.</dd>
+</dl>
+
+<h3 id="Exemplo_Rotação">Exemplo: Rotação</h3>
+
+<p>Este exemplo cria um iframe que permite que a página inicial do Google seja utilizada com uma rotação de 90 graus a partir do 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">Veja um exemplo funcionando</a><br>
+ <a class="internal" href="/@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">Veja uma foto do exemplo</a></p>
+
+<pre class="brush: html">&lt;div style="transform: rotate(90deg); transform-origin: bottom left;"&gt;
+  &lt;iframe src="http://www.google.com/" width="500" height="600"&gt;&lt;/iframe&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="Example_Inclinando_e_Movendo">Example: Inclinando e Movendo</h3>
+
+<p>Este exemplo cria um iframe que permite que você use a página inicial do Google inclinada em 10 graus no eixo 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">Veja um exemplo funcionando</a><br>
+ <a class="internal" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">View uma foto do exemplo</a></p>
+
+<pre class="brush: html">&lt;div style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"&gt;
+  &lt;iframe src="http://www.google.com/" width="600" height="500"&gt;&lt;/iframe&gt;
+&lt;/div&gt;
+</pre>
+
+<h2 id="Propriedades_especificas_3D_do_CSS">Propriedades especificas 3D do CSS</h2>
+
+<p>Trabalhar com propriedades CSS em 3D é um pouco mais difícil. Você tem que começar configurando o espaço 3D dando perspectiva a ele, então você tem que configurar como os elementos 2D irão se comportar no espaço.</p>
+
+<h3 id="Configurando_uma_perspectiva">Configurando uma perspectiva</h3>
+
+<p>O primeiro elemento a ser configurado é a perspectiva. É ela a responsável pela sensação de 3D. Quanto mais longe o objeto estiver do usuário, menor ele é.</p>
+
+<p>Quanto será a sensação de encolhimento é definida pela propriedade {{ cssxref("perspective") }}. Quanto menor o valor, mais profundidade terá o objeto.</p>
+
+<div>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>perspective:0;</code></td>
+   <td><code>perspective:150px;</code></td>
+   <td><code>perspective:300px;</code></td>
+   <td><code>perspective:600px;</code></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 0; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 150px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 600px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
+    <div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;">   </div>
+
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>O segundo elemento a ser configurado é a posição de visão, que será definida pela propriedade {{ cssxref("perspective-origin") }}. Por padrão a perspectiva é centralizada, o que nem sempre é o ideal.</p>
+
+<div>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>perspective-origin:150px 150px;</code></td>
+   <td><code>perspective-origin:50% 50%;</code></td>
+   <td><code>perspective-origin:-50px -50px;</code></td>
+  </tr>
+  <tr>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 50% 50%;">
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+   <td>
+    <div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
+    <div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: -50% -50%;">
+    <div class="front" style="">1</div>
+
+    <div class="back" style="">2</div>
+
+    <div class="right" style="">3</div>
+
+    <div class="left" style="">4</div>
+
+    <div class="top" style="">5</div>
+
+    <div class="bottom" style="">6</div>
+    </div>
+    </div>
+   </td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Feito isso, você pode trabalhar com elementos 3D.</p>
+
+<h3 id="Elementos_2D_em_espaço_3D">Elementos 2D em espaço 3D</h3>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li><a href="/en/Using_Deviceorientation_In_3D_Transforms" title="Using Deviceorientation In 3D Transforms">Usando deviceorientation com 3D Transforms</a></li>
+</ul>