diff options
Diffstat (limited to 'files/pt-br/web/css/transform-function/index.html')
| -rw-r--r-- | files/pt-br/web/css/transform-function/index.html | 227 |
1 files changed, 227 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><transform-function></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><transform-function></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("<length>")}}s, in addition to the standard {{cssxref("<number>")}}.</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> |