initial commit

1 files changed, 283 insertions, 0 deletions

diff --git a/files/pt-br/web/css/transform/index.html b/files/pt-br/web/css/transform/index.html
new file mode 100644
index 0000000000..423a21045c
--- /dev/null
+++ b/files/pt-br/web/css/transform/index.html
@@ -0,0 +1,283 @@
+---
+title: transform
+slug: Web/CSS/transform
+translation_of: Web/CSS/transform
+---
+<p>{{ CSSRef() }}{{ SeeCompatTable() }}</p>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p>A Propriedade CSS <code style="color: rgb(51, 51, 51); font-size: 14px; line-height: 21px;">transform</code><span style="line-height: 21px;"> permite modificar o espaço coordenado do modelo de formatação CSS. Usando-a, elementos podem ser traduzidos, rotacionados, ter seu tamanho ajustado e inclinados de acordo com os valores definidos.</span></p>
+
+<p><span style="line-height: 21px;">Se a propriedade tem um valor diferente de </span><span style="font-family: monospace; line-height: 21px;">none, </span><span style="line-height: 21px;">um contexto de empilhamento será criado. Neste caso, o objeto atuará como um bloco recipiente para  </span><span style="font-family: monospace; line-height: 21px;">position: fixed</span><span style="line-height: 21px;"> para os elementos que estão contidos.</span></p>
+
+<p><span style="line-height: 21px;">{{cssinfo}}</span></p>
+
+<h2 id="Sintaxe" style="padding: 0px;">Sintaxe</h2>
+
+<pre class="twopartsyntaxbox">Gramática Formal: &lt;transform-função&gt; [&lt;transform-função&gt;]* | none
+</pre>
+
+<pre>transform: none
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
+transform: translate(12px, 50%)
+transform: translateX(2em)
+transform: translateY(3in)
+transform: scale(2, 0.5)
+transform: scaleX(2)
+transform: scaleY(0.5)
+transform: rotate(0.5turn)
+transform: skewX(30deg)
+transform: skewY(1.07rad)
+transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
+transform: translate3d(12px, 50%, 3em)
+transform: translateZ(2px)
+transform: scale3d(2.5, 1.2, 0.3)
+transform: scaleZ(0.3)
+transform: rotate3d(1, 2.0, 3.0, 10deg)
+transform: rotateX(10deg)
+transform: rotateY(10deg)
+transform: rotateZ(10deg)
+transform: perspective(17px)
+
+transform: translateX(10px) rotate(10deg) translateY(5px)
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>&lt;transform-função&gt;</code></dt>
+ <dd>Uma ou mais das  {{ anch("funções CSS transform") }} para serem aplicadas, veja abaixo.</dd>
+ <dt><code>none</code></dt>
+ <dd>Espcifica que nenhuma função transform deve ser aplicada.</dd>
+</dl>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<p>Veja <a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Using_CSS_transforms">Using CSS transforms</a>.</p>
+
+<h3 id="Exemplo_ao_vivo">Exemplo ao vivo:</h3>
+
+<pre style="">pre {
+     width: 33em;
+     border: solid red;
+
+    -webkit-transform: translate(100px) rotate(20deg);
+    -webkit-transform-origin: 60% 100%;
+
+    -o-transform:translate(100px) rotate(20deg);
+    -o-transform-origin:60% 100%;
+
+    transform: translate(100px) rotate(20deg);
+    transform-origin: 60% 100%;
+}
+</pre>
+
+<h2 id="CSS_transform_functions">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 id="matrix">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 {{cssxref("&lt;length&gt;")}} value for <strong>tx</strong> and <strong>ty</strong>. Webkit (Safari, Chrome) and Opera currently support a unitless {{cssxref("&lt;number&gt;")}} for <strong>tx</strong> and <strong>ty</strong>.</div>
+
+<h4 id="Live_examples">Live examples</h4>
+
+<pre style=""> background: gold;  width: 30em;
+
+ -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
+      -o-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;
+
+ -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
+      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
+         transform: matrix(1, 0, 0.6, 1,  250, 0);
+</pre>
+
+<h4 id="See_also"><br>
+ 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 id="rotate">rotate</h3>
+
+<pre class="eval">transform:  rotate(angle);       /* an &lt;angle&gt;, e.g.  rotate(30deg) */</pre>
+
+<p>Rotates the element clockwise around its origin (as specified by the {{ Cssxref("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 id="scale">scale</h3>
+
+<pre class="eval">transform:  scale(sx[, sy]);     /* one or two unitless &lt;number&gt;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 id="scaleX">scaleX</h3>
+
+<pre class="eval">transform:  scaleX(sx);          /* a unitless &lt;number&gt;, e.g.  scaleX(2.7) */</pre>
+
+<p>Specifies a scale operation using the vector <strong>[sx, 1]</strong>.</p>
+
+<h3 id="scaleY">scaleY</h3>
+
+<pre class="eval">transform:  scaleY(sy)           /* a unitless &lt;number&gt;, e.g.  scaleY(0.3) */</pre>
+
+<p>Specifies a scale operation using the vector <strong>[1, sy]</strong>.</p>
+
+<h3 id="skew">skew</h3>
+
+<p>{{ non-standard_header() }}</p>
+
+<pre class="eval">transform:  skew(ax[, ay])       /* one or two &lt;angle&gt;s, 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>
+
+<div class="note"><strong>Note:</strong> The <code>skew()</code> function was present in early drafts. It has been removed but is still present in some implementations. Do not use it.<br>
+<br>
+To achieve the same effect, use <code>skewX()</code> if you were using <code>skew()</code> with one parameter or <code>matrix(1, <em>tan(</em>ax<em>)</em></code><em>, </em><code><em>tan(</em>ay<em>)</em>, 1, 0, 0)</code> for the general way. Note that <em>tan()</em> isn't a CSS function and you have to precalculate it yourself.</div>
+
+<h3 id="skewX">skewX</h3>
+
+<pre class="eval">transform:  skewX(angle)         /* an &lt;angle&gt;, e.g.  skewX(-30deg) */</pre>
+
+<p>Skews the element around the X axis by the given <code>angle</code>.</p>
+
+<h3 id="skewY">skewY</h3>
+
+<pre class="eval">transform:  skewY(angle)         /* an &lt;angle&gt;, e.g.  skewY(4deg) */</pre>
+
+<p>Skews the element around the Y axis by the given <code>angle</code>.</p>
+
+<h3 id="translate">translate</h3>
+
+<pre class="eval">transform:  translate(tx[, ty])  /* one or two &lt;length&gt; 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 id="translateX">translateX</h3>
+
+<pre class="eval">transform:  translateX(tx)       /* see &lt;length&gt; for possible values */</pre>
+
+<p>Translates the element by the given amount along the X axis.</p>
+
+<h3 id="translateY">translateY</h3>
+
+<pre class="eval">transform:  translateY(ty)       /* see &lt;length&gt; for possible values */</pre>
+
+<p>Translates the element by the given amount along the Y axis.</p>
+
+<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', '#transform', 'transform') }}</td>
+   <td>{{ Spec2('CSS3 Transforms') }}</td>
+   <td> </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>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td>
+   <td>{{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>9.0 {{ property_prefix("-ms") }}<br>
+    10.0</td>
+   <td>10.5{{ property_prefix("-o") }}<br>
+    12.5</td>
+   <td>3.1{{ property_prefix("-webkit") }}</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>12.0{{ property_prefix("-webkit") }}</td>
+   <td>10.0{{ property_prefix("-moz") }}<br>
+    {{ CompatGeckoDesktop("16.0") }}</td>
+   <td>10.0</td>
+   <td>{{ CompatNo() }}</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>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes">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>
+
+<p>Gecko 14.0 removed the experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0 for compatibility reason. As it is non-standard and will likely be removed in the future, do not use it.</p>
+
+<h2 id="See_also_2">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Using_CSS_transforms" title="/en-US/docs/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>