From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/css/transform-function/matrix()/index.html | 111 +++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 files/pt-br/web/css/transform-function/matrix()/index.html (limited to 'files/pt-br/web/css/transform-function/matrix()') 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() +--- +
{{CSSRef}}
+ +

A função CSS matrix() define uma matriz de transformação 2D homogênea. Isso resulta em um dado do tipo {{cssxref("<transform-function>")}} .

+ +
+

Note: matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

+
+ +

Syntax

+ +

The matrix() 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.

+ +
Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for tx and ty.
+ +
matrix(a, b, c, d, tx, ty)
+
+ +

Values

+ +
+
a b c d
+
Are {{cssxref("<number>")}}s describing the linear transformation.
+
tx ty
+
Are {{cssxref("<number>")}}s describing the translation to apply.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]
+ +

The values represent the following functions:
+ matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

+ +

Examples

+ +

HTML

+ +
<div>Normal</div>
+<div class="changed">Changed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}
+ +

Result

+ +

{{EmbedLiveSample("Examples", 350, 350)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}{{Spec2("CSS3 Transforms")}}Initial definition
+ +

Browser compatibility

+ +

Please see the <transform-function> data type for compatibility info.

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf