initial commit

7 files changed, 950 insertions, 0 deletions

diff --git a/files/pt-br/web/css/transform-function/index.html b/files/pt-br/web/css/transform-function/index.html
new file mode 100644
index 0000000000..edb6589b7f
--- /dev/null
+++ b/files/pt-br/web/css/transform-function/index.html
@@ -0,0 +1,227 @@
+---
+title: <transform-function>
+slug: Web/CSS/transform-function
+tags:
+  - CSS
+  - CSS Data Type
+  - CSS Transforms
+  - Layout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/transform-function
+---
+<div>{{CSSRef}}</div>
+
+<p>The <strong><code>&lt;transform-function&gt;</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.</p>
+
+<h2 id="Describing_transformations_mathematically">Describing transformations mathematically</h2>
+
+<p>Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the <a href="https://en.wikipedia.org/wiki/Cartesian_coordinate_system">Cartesian coordinate system</a>, although <a href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> are also sometimes used.</p>
+
+<h3 id="Cartesian_coordinates"><a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="/files/3438/coord_in_R2.png" style="float: right; width: 171px;"></a>Cartesian coordinates</h3>
+
+<p>In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation <code>(x, y)</code>.</p>
+
+<p>In CSS (and most computer graphics), the origin <code>(0, 0)</code> represents the<em> top-left</em> corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be <code>(2, 5)</code>, while a point 3 units to the left and 12 units up would be <code>(-3, -12)</code>.</p>
+
+<h3 id="Transformation_functions">Transformation functions</h3>
+
+<p>Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2x2 matrix, like this:</p>
+
+<div style="text-align: center;">
+<p><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></p>
+</div>
+
+<p>The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png"><img src="/@api/deki/files/5799/=transform_functions_generic_transformation_cart.png?size=webview" style="height: 32px; width: 189px;"></a></div>
+
+<p><br>
+ It is even possible to apply several transformations in a row:</p>
+
+<div style="text-align: center;"><a href="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png"><img src="/@api/deki/files/5800/=transform_functions_transform_composition_cart.png?size=webview" style="height: 32px; width: 313px;"></a></div>
+
+<p><br>
+ With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.</p>
+
+<p>However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector <code>(tx, ty)</code> must be expressed separately, as two additional parameters.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Though trickier than Cartesian coordinates, <a class="external" href="https://en.wikipedia.org/wiki/Homogeneous_coordinates">homogeneous coordinates</a> in <a class="external" href="https://en.wikipedia.org/wiki/Projective_geometry">projective geometry</a> lead to 3x3 transformation matrices, and can simply express translations as linear functions.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The <code>&lt;transform-function&gt;</code> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.</p>
+
+<h3 id="Matrix_transformation">Matrix transformation</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/matrix","matrix()")}}</dt>
+ <dd>Describes a homogeneous 2D transformation matrix.</dd>
+ <dt>{{cssxref("transform-function/matrix3d","matrix3d()")}}</dt>
+ <dd>Describes a 3D transformation as a 4x4 homogeneous matrix.</dd>
+</dl>
+
+<h3 id="Perspective">Perspective</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/perspective","perspective()")}}</dt>
+ <dd>Sets the distance between the user and the z=0 plane.</dd>
+</dl>
+
+<h3 id="Rotation">Rotation</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/rotate","rotate()")}}</dt>
+ <dd>Rotates an element around a fixed point on the 2D plane.</dd>
+ <dt>{{cssxref("transform-function/rotate3d","rotate3d()")}}</dt>
+ <dd>Rotates an element around a fixed axis in 3D space.</dd>
+ <dt>{{cssxref("transform-function/rotateX","rotateX()")}}</dt>
+ <dd>Rotates an element around the horizontal axis.</dd>
+ <dt>{{cssxref("transform-function/rotateY","rotateY()")}}</dt>
+ <dd>Rotates an element around the vertical axis.</dd>
+ <dt>{{cssxref("transform-function/rotateZ","rotateZ()")}}</dt>
+ <dd>Rotates an element around the z-axis.</dd>
+</dl>
+
+<h3 id="Scaling_(resizing)">Scaling (resizing)</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/scale","scale()")}}</dt>
+ <dd>Scales an element up or down on the 2D plane.</dd>
+ <dt>{{cssxref("transform-function/scale3d","scale3d()")}}</dt>
+ <dd>Scales an element up or down in 3D space.</dd>
+ <dt>{{cssxref("transform-function/scaleX","scaleX()")}}</dt>
+ <dd>Scales an element up or down horizontally.</dd>
+ <dt>{{cssxref("transform-function/scaleY","scaleY()")}}</dt>
+ <dd>Scales an element up or down vertically.</dd>
+ <dt>{{cssxref("transform-function/scaleZ","scaleZ()")}}</dt>
+ <dd>Scales an element up or down along the z-axis.</dd>
+</dl>
+
+<h3 id="Skewing_(distortion)">Skewing (distortion)</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/skew","skew()")}}</dt>
+ <dd>Skews an element on the 2D plane.</dd>
+ <dt>{{cssxref("transform-function/skewX","skewX()")}}</dt>
+ <dd>Skews an element in the horizontal direction.</dd>
+ <dt>{{cssxref("transform-function/skewY","skewY()")}}</dt>
+ <dd>Skews an element in the vertical direction.</dd>
+</dl>
+
+<h3 id="Translation_(moving)">Translation (moving)</h3>
+
+<dl>
+ <dt>{{cssxref("transform-function/translate","translate()")}}</dt>
+ <dd>Translates an element on the 2D plane.</dd>
+ <dt>{{cssxref("transform-function/translate3d","translate3d()")}}</dt>
+ <dd>Translates an element in 3D space.</dd>
+ <dt>{{cssxref("transform-function/translateX","translateX()")}}</dt>
+ <dd>Translates an element horizontally.</dd>
+ <dt>{{cssxref("transform-function/translateY","translateY()")}}</dt>
+ <dd>Translates an element vertically.</dd>
+ <dt>{{cssxref("transform-function/translateZ","translateZ()")}}</dt>
+ <dd>Translates an element along the z-axis.</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', '#transform-property', 'transform')}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td>
+   <td>9.0<sup>[2]</sup><br>
+    10.0</td>
+   <td>10.5</td>
+   <td>3.1</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>12.0</td>
+   <td>{{CompatGeckoDesktop("10.0")}}</td>
+   <td>10.0</td>
+   <td>15.0</td>
+   <td>4.0</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)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11.5</td>
+   <td>3.2</td>
+  </tr>
+  <tr>
+   <td>3D Support</td>
+   <td>{{CompatAndroid(3.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>22</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Gecko 14.0 removed experimental support for <code>skew()</code>, but it was reintroduced in Gecko 15.0. Before Firefox 16, the translation values of <code>matrix()</code> and <code>matrix3d()</code> could be {{cssxref("&lt;length&gt;")}}s, in addition to the standard {{cssxref("&lt;number&gt;")}}.</p>
+
+<p>[2] Internet Explorer 5.5 and later support 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. Internet Explorer 9.0 supports 2D but not 3D transforms. Thus, mixing 2D and 3D transform functions in this browser (e.g., <code>-ms-transform: rotate(10deg) translateZ(0);</code>) will invalidate the entire property.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>CSS {{cssxref("transform")}} property</li>
+</ul>
diff --git a/files/pt-br/web/css/transform-function/matrix()/index.html b/files/pt-br/web/css/transform-function/matrix()/index.html
new file mode 100644
index 0000000000..36c7796d1f
--- /dev/null
+++ b/files/pt-br/web/css/transform-function/matrix()/index.html
@@ -0,0 +1,111 @@
+---
+title: matrix()
+slug: Web/CSS/transform-function/matrix()
+translation_of: Web/CSS/transform-function/matrix()
+---
+<div>{{CSSRef}}</div>
+
+<p>A função CSS <code><strong>matrix()</strong></code> define uma matriz de transformação 2D homogênea. Isso resulta em um dado do tipo {{cssxref("&lt;transform-function&gt;")}} .</p>
+
+<div class="note">
+<p><strong>Note:</strong> <code>matrix(a, b, c, d, tx, ty)</code> is a shorthand for <code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d</a>(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)</code>.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<p>The <code>matrix()</code> function is specified with six values. The constant values are implied and not passed as parameters; the other parameters are described in the column-major order.</p>
+
+<div class="note"><strong>Note:</strong> Until Firefox 16, Gecko accepted a {{cssxref("&lt;length&gt;")}} value for <var>tx</var> and <var>ty</var>.</div>
+
+<pre class="syntaxbox">matrix(<var>a</var>, <var>b</var>, <var>c</var>, <var>d</var>, <var>tx</var>, <var>ty</var>)
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><var>a</var> <var>b</var> <var>c</var> <var>d</var></dt>
+ <dd>Are {{cssxref("&lt;number&gt;")}}s describing the linear transformation.</dd>
+ <dt><var>tx</var> <var>ty</var></dt>
+ <dd>Are {{cssxref("&lt;number&gt;")}}s describing the translation to apply.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Cartesian coordinates on ℝ<sup>2</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>2</sup></th>
+   <th scope="col">Cartesian coordinates on ℝ<sup>3</sup></th>
+   <th scope="col">Homogeneous coordinates on ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd></mtr> <mtr><mtd>b</mtd><mtd>d</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>a</mtd><mtd>c</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr><mtd>b</mtd><mtd>d</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[a b c d tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>The values represent the following functions:<br>
+ <code>matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )</code></p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="changed"&gt;Changed&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample("Examples", 350, 350)}}</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", "#funcdef-transform-matrix", "matrix()")}}</td>
+   <td>{{Spec2("CSS3 Transforms")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>Please see the <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> data type for compatibility info.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/en-US/docs/Web/CSS/transform-function/matrix3d">matrix3d()</a></code></li>
+ <li><a href="https://dev.opera.com/articles/understanding-the-css-transforms-matrix/">Understanding the CSS Transforms Matrix</a></li>
+</ul>
diff --git a/files/pt-br/web/css/transform-function/perspective()/index.html b/files/pt-br/web/css/transform-function/perspective()/index.html
new file mode 100644
index 0000000000..9a16ed1cea
--- /dev/null
+++ b/files/pt-br/web/css/transform-function/perspective()/index.html
@@ -0,0 +1,123 @@
+---
+title: perspective()
+slug: Web/CSS/transform-function/perspective()
+tags:
+  - Função CSS
+  - Referencia
+  - Transformações CSS
+translation_of: Web/CSS/transform-function/perspective()
+---
+<div>{{CSSRef}}</div>
+
+<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>perspective()</code></strong> define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p>A distância de perspectiva usada por<code>perspective()</code> é especificada por um valor {{cssxref("&lt;length&gt;")}}, que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.</p>
+
+<pre class="syntaxbox notranslate">perspective(d)
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><em>d</em></dt>
+ <dd>É um {{cssxref("&lt;length&gt;")}} representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordenadas cartesianas em ℝ<sup>2</sup></th>
+   <th scope="col">Coordenadas homogêneas em ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordenadas cartesianas em ℝ<sup>3</sup></th>
+   <th scope="col">Coordenadas homogêneas em ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="2" rowspan="2">
+    <p>Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.</p>
+   </td>
+   <td colspan="1" rowspan="2">Essa não é uma transformação linear em ℝ<sup>3</sup>, e não pode ser representada usando uma matriz de coordenadas cartesianas.</td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd><mo>−</mo>1<mo>/</mo>d</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Sem perspectiva:&lt;/p&gt;
+&lt;div class="no-perspective-box"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Com perspectiva (7.5cm):&lt;/p&gt;
+&lt;div class="perspective-box"&gt;
+  &lt;div class="face front"&gt;A&lt;/div&gt;
+  &lt;div class="face top"&gt;B&lt;/div&gt;
+  &lt;div class="face left"&gt;C&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+.no-perspective-box {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: rotateX(-15deg) rotateY(15deg);
+  margin-left: 100px;
+}
+
+.perspective-box {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
+  margin-left: 100px;
+}
+
+.top {
+  background-color: skyblue;
+  transform: rotateX(90deg) translate3d(0, 0, 50px);
+}
+
+.left {
+  background-color: pink;
+  transform: rotateY(-90deg) translate3d(0, 0, 50px);
+}
+
+.front {
+  background-color: limegreen;
+  transform: translate3d(0, 0, 50px);
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{ EmbedLiveSample('Examples', '250', '350') }}</p>
+
+<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2>
+
+<p>Veja o tipo de dado <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para informações de compatibilidade.</p>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/pt-br/web/css/transform-function/rotate()/index.html b/files/pt-br/web/css/transform-function/rotate()/index.html
new file mode 100644
index 0000000000..5f7b4270d0
--- /dev/null
+++ b/files/pt-br/web/css/transform-function/rotate()/index.html
@@ -0,0 +1,85 @@
+---
+title: rotate()
+slug: Web/CSS/transform-function/rotate()
+translation_of: Web/CSS/transform-function/rotate()
+---
+<p>{{CSSRef}}</p>
+
+<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate()</code></strong> <span class="short_text" id="result_box" lang="pt"><span>define uma transformação que</span></span> gira um elemento <span class="short_text" id="result_box" lang="pt"><span>em torno de um ponto fixo no plano 2D</span></span>, <span class="short_text" id="result_box" lang="pt"><span>sem deformá-lo</span></span>. O resultado é um tipo de dados {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p>
+
+<p><span class="short_text" id="result_box" lang="pt"><span>O eixo de rotação passa por uma origem,</span></span> definido pela propriedade CSS {{ cssxref("transform-origin") }}.</p>
+
+<h2 id="Sintaxe"><span class="short_text" id="result_box" lang="pt"><span>Sintaxe</span></span></h2>
+
+<p><span class="short_text" id="result_box" lang="pt"><span>A quantidade de rotação criada por </span></span><code>rotate()</code> <span class="short_text" id="result_box" lang="pt"><span>é especificado por um</span></span> {{cssxref("&lt;angle&gt;")}}. <span class="short_text" id="result_box" lang="pt"><span>Se positivo, o movimento será no sentido horário</span></span>; Se negativo, <span class="short_text" id="result_box" lang="pt"><span>ela será no sentido anti-horário. </span></span> <span id="result_box" lang="pt"><span>Uma rotação de 180° é chamada de </span></span><em>point reflection (</em><span lang="pt"><span>reflexão do ponto).</span></span></p>
+
+<pre class="syntaxbox notranslate">rotate(<em>a</em>)
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>a</code></dt>
+ <dd>É um {{ cssxref("&lt;angle&gt;") }} <span class="short_text" id="result_box" lang="pt"><span>representando o ângulo da rotação.</span></span> <span id="result_box" lang="pt"><span>Um ângulo positivo indica uma rotação no sentido horário, </span></span><span class="short_text" id="result_box" lang="pt"><span>um ângulo negativo no sentido anti-horário.</span></span></dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col"><span class="short_text" id="result_box" lang="pt"><span>Coordenadas cartesianas em</span></span> ℝ<sup>2</sup></th>
+   <th scope="col"><span class="short_text" id="result_box" lang="pt"><span>Coordenadas homogêneas em</span></span> ℝℙ<sup>2</sup></th>
+   <th scope="col"><span class="short_text" id="result_box" lang="pt"><span>Coordenadas cartesianas em</span></span> ℝ<sup>3</sup></th>
+   <th scope="col"><span class="short_text" id="result_box" lang="pt"><span>Coordenadas homogêneas em</span></span> ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
+   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotated&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
+</pre>
+
+<h3 id="Resultado">Resultado</h3>
+
+<p>{{EmbedLiveSample("Examples", "auto", 180)}}</p>
+
+<h2 id="Compatibilidade_do_navegador"><span class="short_text" id="result_box" lang="pt"><span>Compatibilidade do navegador</span></span></h2>
+
+<p>Por favor, veja o tipo de dados <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para informações de <span id="result_box" lang="pt"><span>compatibilidade</span></span>.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/en-US/docs/Web/CSS/transform-function/rotate3d">rotate3d()</a></code></li>
+</ul>
diff --git a/files/pt-br/web/css/transform-function/rotate3d()/index.html b/files/pt-br/web/css/transform-function/rotate3d()/index.html
new file mode 100644
index 0000000000..b61d4e5b4b
--- /dev/null
+++ b/files/pt-br/web/css/transform-function/rotate3d()/index.html
@@ -0,0 +1,127 @@
+---
+title: rotate3d()
+slug: Web/CSS/transform-function/rotate3d()
+tags:
+  - Função CSS
+  - Referencia
+  - Transformações CSS
+translation_of: Web/CSS/transform-function/rotate3d()
+---
+<div>{{CSSRef}}</div>
+
+<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code></strong> define uma transformação que gira um elemento em torno de um eixo fixo no espaço 3D, sem deformá-lo. Seu resultado é um dado do tipo {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p>No espaço 3D, rotações têm três graus de liberdade que, juntos, descrevem um único eixo de rotação. O eixo de rotação é definido por um vetor [x, y, z] e passado pela origem (como definido pela propriedade {{ cssxref("transform-origin") }}). Se, como especificado, o vetor não for <em>normalizado</em> (isto é, se a soma dos quadrados das suas três coordenadas não for 1), o {{glossary("user agent")}} irá normalizá-lo internamente. Um vetor não-normalizável, como o vetor nulo [0, 0, 0], fará com que a rotação seja ignorada, mas sem invalidar toda a propriedade CSS.</p>
+
+<div class="note"><strong>Nota:</strong> Diferente de rotações no plano 2D, a composição de rotações 3D normalmente não é comutativa. Em outras palavras, a ordem na qual as rotações são aplicadas impacta o resultado.</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p>A quantidade de rotação criada por <code>rotate3d()</code> é especificada por três {{cssxref("&lt;number&gt;")}} e um {{cssxref("&lt;angle&gt;")}}. Os <code>&lt;number&gt;</code> representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O <code>&lt;angle&gt;</code> representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.</p>
+
+<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>x</code></dt>
+ <dd>É um {{cssxref("&lt;number&gt;")}} descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.</dd>
+ <dt><code>y</code></dt>
+ <dd>É um {{cssxref("&lt;number&gt;")}} descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.</dd>
+ <dt><code>z</code></dt>
+ <dd>É um {{cssxref("&lt;number&gt;")}} descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.</dd>
+ <dt><code>a</code></dt>
+ <dd>É um {{ cssxref("&lt;angle&gt;") }} representando o ângulo de rotação. Um ângulo positivo denota uma rotação no sentido horário, e um negativo no sentido anti-horário.</dd>
+</dl>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Coordenadas cartesianas em ℝ<sup>2</sup></th>
+   <td rowspan="2">Essa transformação se aplica ao plano 3D e não pode ser representada em um plano.</td>
+  </tr>
+  <tr>
+   <th scope="col">Coordenadas homogêneas em ℝℙ<sup>2</sup></th>
+  </tr>
+  <tr>
+   <th scope="col">Coordenadas cartesianas em ℝ<sup>3</sup></th>
+   <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sin(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
+  </tr>
+  <tr>
+   <th scope="col">Coordenadas homogêneas em ℝℙ<sup>3</sup></th>
+   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Rotacionando_no_eixo_y">Rotacionando no eixo y</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotacionado&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}</p>
+
+<h3 id="Rotacionando_em_um_eixo_customizado">Rotacionando em um eixo customizado</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="rotated"&gt;Rotacionado&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}</p>
+
+<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2>
+
+<p>Veja o tipo de dado <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para informações de compatibilidade.</p>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>
diff --git a/files/pt-br/web/css/transform-function/scale()/index.html b/files/pt-br/web/css/transform-function/scale()/index.html
new file mode 100644
index 0000000000..c874f81954
--- /dev/null
+++ b/files/pt-br/web/css/transform-function/scale()/index.html
@@ -0,0 +1,125 @@
+---
+title: scale()
+slug: Web/CSS/transform-function/scale()
+tags:
+  - Função CSS
+  - Referencia
+  - Transformações CSS
+translation_of: Web/CSS/transform-function/scale()
+---
+<div>{{CSSRef}}</div>
+
+<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>scale()</code></strong> define uma transformação que redimensiona um elemento no plano 2D. Como o redimensionamento é definido por um vetor, ele pode transformar as dimensões verticais e horizontais em escalas diferentes. Seu resultado é um dado do tipo {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img src="https://mdn.mozillademos.org/files/12115/scale.png" style="height: 325px; width: 392px;"></p>
+
+<p>Essa transformação de redimensionamento é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto cada direção deve ser redimensionada. Se as duas coordenadas forem iguais, o redimensionamento é uniforme (<em>isotrópico</em>) e a proporção do elemento é preservada (isto é uma <a href="https://en.wikipedia.org/wiki/Homothetic_transformation">transformação homotética</a>).</p>
+
+<p>Quando o valor de uma coordenada está fora do alcance [-1, 1], o elemento cresce ao longo daquela dimensão; quando está dentro, ele encolhe. Se for negativo, o resultado é um<a href="https://en.wikipedia.org/wiki/Point_reflection"> ponto de reflexão</a> naquela dimensão. O valor 1 não tem efeito.</p>
+
+<div class="note"><strong>Nota:</strong> A função <code>scale()</code> apenas redimensiona em 2D Para redimensionar em 3D, use <code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code> ao invés.</div>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<p>A função <code>scale()</code> é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.</p>
+
+<pre class="syntaxbox">scale(<em>sx</em>)
+
+scale(<em>sx</em>, <em>sy</em>)
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt><code>sx</code></dt>
+ <dd>Um {{cssxref("&lt;number&gt;")}} representando a abscissa do vetor de redimensionamento.</dd>
+ <dt><code>sy</code></dt>
+ <dd>Um {{cssxref("&lt;number&gt;")}} representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão é<code>sx</code>, resultando em um redimensionamento uniforme que preserva a proporção do elemento.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordenadas cartesianas em ℝ<sup>2</sup></th>
+   <th scope="col">Coordenadas homogêneas em ℝℙ<sup>2</sup></th>
+   <th scope="col">Coordenadas cartesianas em ℝ<sup>3</sup></th>
+   <th scope="col">Coordenadas homogêneas em ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>sx</mtd><mtd>0</mtd></mtr> <mtr><mtd>0</mtd><mtd>sy</mtd></mtr> </mtable> </mfenced> </math></td>
+   <td><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd></mtr><mtr>0<mtd>sy</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>sx<mtd>0</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>sy</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[sx 0 0 sy 0 0]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Redimensionando_as_dimensões_X_e_Y_juntas">Redimensionando as dimensões X e Y juntas</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="scaled"&gt;Redimensionado&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}</p>
+
+<h3 id="Redimensionando_dimensões_X_e_Y_separadamente_e_transladando_a_origem">Redimensionando dimensões X e Y separadamente e transladando a origem</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;Normal&lt;/div&gt;
+&lt;div class="scaled"&gt;Redimensionado&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css">div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(2, 0.5); /* Igual a scaleX(2) scaleY(0.5) */
+  transform-origin: left;
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}</p>
+
+<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</h2>
+
+<p>Veja o dado do tipo <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para informações de compatibilidade.</p>
+
+<h2 id="Ver_também">Ver também</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+ <li><code><a href="/en-US/docs/Web/CSS/transform-function/scale3d">scale3d()</a></code></li>
+</ul>
diff --git a/files/pt-br/web/css/transform-function/translate()/index.html b/files/pt-br/web/css/transform-function/translate()/index.html
new file mode 100644
index 0000000000..395dd0e784
--- /dev/null
+++ b/files/pt-br/web/css/transform-function/translate()/index.html
@@ -0,0 +1,152 @@
+---
+title: translate()
+slug: Web/CSS/transform-function/translate()
+tags:
+  - CSS
+  - Função CSS
+  - Referencia
+  - Transformações CSS
+translation_of: Web/CSS/transform-function/translate()
+---
+<div>{{CSSRef}}</div>
+
+<p>A função <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>translate()</code></strong> reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado {{cssxref("&lt;transform-function&gt;")}}.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12121/translate.png" style="height: 195px; width: 249px;"></p>
+
+<p>Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush: css notranslate">/* Valores &lt;length-percentage&gt; únicos */
+transform: translate(200px);
+transform: translate(50%);
+
+/* Valores &lt;length-percentage&gt; duplos */
+transform: translate(100px, 200px);
+transform: translate(100px, 50%);
+transform: translate(30%, 200px);
+transform: translate(30%, 50%);
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<dl>
+ <dt>Valores <code>&lt;length-percentage&gt;</code> únicos</dt>
+ <dd>Este valor é um {{cssxref("length")}} ou {{cssxref("percentage")}} representando a abcissa (horizontal, coordenada x) do vetor de translação. A ordenada (vertical, coordenada y) do vetor de translação será definida como <code>0</code>. Por exemplo, <code>translate(2)</code> é equivalente a <code>translate(2, 0)</code>. Um valor percentual refere-se à largura da caixa de referência definida pela propriedade {{cssxref("transform-box")}}.</dd>
+ <dt>Valores <code>&lt;length-percentage&gt;</code> duplos</dt>
+ <dd>Este valor descreve dois {{cssxref("length")}} ou valores {{cssxref("percentage")}} representando tanto a abcissa (coordenada x) quanto a ordenada (coordenada y) do vetor de translação. Uma porcentagem como primeiro valor refere-se à largura, como segunda parte da altura da caixa de referência definida pela propedade {{cssxref("transform-box")}}.</dd>
+</dl>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Coordenadas cartesianas em ℝ<sup>2</sup></th>
+   <th scope="col">Coordenadas homogêneas emℝℙ<sup>2</sup></th>
+   <th scope="col">Coordenadas cartesianas em ℝ<sup>3</sup></th>
+   <th scope="col">Coordenadas homogêneas em ℝℙ<sup>3</sup></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td colspan="1" rowspan="2">
+    <p>Uma translação não é uma transformação linear em ℝ<sup>2</sup> e não pode ser representada usando uma matriz de coordenadas cartesianas.</p>
+   </td>
+   <td><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr>1<mtd>0</mtd><mtd>0</mtd><mtd>tx</mtd></mtr><mtr>0<mtd>1</mtd><mtd>0</mtd><mtd>ty</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
+  </tr>
+  <tr>
+   <td><code>[1 0 0 1 tx ty]</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Sintaxe_formal">Sintaxe formal</h3>
+
+<pre class="syntaxbox notranslate">translate({{cssxref("length-percentage")}} , {{cssxref("length-percentage")}}<a href="/en-US/docs/Web/CSS/Value_definition_syntax#Question_mark_()">?</a>)
+</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<h3 id="Usando_uma_conversão_de_eixo_único">Usando uma conversão de eixo único</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Estático&lt;/div&gt;
+&lt;div class="moved"&gt;Movido&lt;/div&gt;
+&lt;div&gt;Estático&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px); /* Igual a: translateX(10px) ou translate(10px, 0) */
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Resultado">Resultado</h4>
+
+<p>{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}</p>
+
+<h3 id="Combinando_a_translação_do_eixo_y_e_do_eixo_x">Combinando a translação do eixo y e do eixo x</h3>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div&gt;Estático&lt;/div&gt;
+&lt;div class="moved"&gt;Movido&lt;/div&gt;
+&lt;div&gt;Estático&lt;/div&gt;</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px, 10px);
+  background-color: pink;
+}
+</pre>
+
+<h4 id="Resultado_2">Resultado</h4>
+
+<p>{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}</p>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificações</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}</td>
+   <td>{{Spec2('CSS3 Transforms')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
+
+<p>Verifique o tipo de dado <code><a href="/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para informações de compatibilidade.</p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{cssxref("transform")}}</li>
+ <li>{{cssxref("&lt;transform-function&gt;")}}</li>
+</ul>