From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../web/css/transform-function/matrix()/index.html | 111 --------------- .../web/css/transform-function/matrix/index.html | 112 +++++++++++++++ .../transform-function/perspective()/index.html | 123 ----------------- .../css/transform-function/perspective/index.html | 124 +++++++++++++++++ .../web/css/transform-function/rotate()/index.html | 85 ------------ .../web/css/transform-function/rotate/index.html | 86 ++++++++++++ .../css/transform-function/rotate3d()/index.html | 127 ----------------- .../web/css/transform-function/rotate3d/index.html | 128 +++++++++++++++++ .../web/css/transform-function/scale()/index.html | 125 ----------------- .../web/css/transform-function/scale/index.html | 126 +++++++++++++++++ .../css/transform-function/translate()/index.html | 152 -------------------- .../css/transform-function/translate/index.html | 153 +++++++++++++++++++++ 12 files changed, 729 insertions(+), 723 deletions(-) delete mode 100644 files/pt-br/web/css/transform-function/matrix()/index.html create mode 100644 files/pt-br/web/css/transform-function/matrix/index.html delete mode 100644 files/pt-br/web/css/transform-function/perspective()/index.html create mode 100644 files/pt-br/web/css/transform-function/perspective/index.html delete mode 100644 files/pt-br/web/css/transform-function/rotate()/index.html create mode 100644 files/pt-br/web/css/transform-function/rotate/index.html delete mode 100644 files/pt-br/web/css/transform-function/rotate3d()/index.html create mode 100644 files/pt-br/web/css/transform-function/rotate3d/index.html delete mode 100644 files/pt-br/web/css/transform-function/scale()/index.html create mode 100644 files/pt-br/web/css/transform-function/scale/index.html delete mode 100644 files/pt-br/web/css/transform-function/translate()/index.html create mode 100644 files/pt-br/web/css/transform-function/translate/index.html (limited to 'files/pt-br/web/css/transform-function') diff --git a/files/pt-br/web/css/transform-function/matrix()/index.html b/files/pt-br/web/css/transform-function/matrix()/index.html deleted file mode 100644 index c8cfc7a643..0000000000 --- a/files/pt-br/web/css/transform-function/matrix()/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -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
- -

Compatibilidade com navegadores

- -

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

- -

See also

- - 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..8b21cf7b37 --- /dev/null +++ b/files/pt-br/web/css/transform-function/matrix/index.html @@ -0,0 +1,112 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +translation_of: Web/CSS/transform-function/matrix() +original_slug: 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
+ +

Compatibilidade com navegadores

+ +

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

+ +

See also

+ + diff --git a/files/pt-br/web/css/transform-function/perspective()/index.html b/files/pt-br/web/css/transform-function/perspective()/index.html deleted file mode 100644 index 314e1bc86c..0000000000 --- a/files/pt-br/web/css/transform-function/perspective()/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -tags: - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/perspective() ---- -
{{CSSRef}}
- -

A função CSS perspective() 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("<transform-function>")}}.

- -

Sintaxe

- -

A distância de perspectiva usada porperspective() é especificada por um valor {{cssxref("<length>")}}, 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.

- -
perspective(d)
-
- -

Valores

- -
-
d
-
É um {{cssxref("<length>")}} 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.
-
- - - - - - - - - - - - - - - - - -
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
-

Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.

- 		Essa não é uma transformação linear em ℝ3, e não pode ser representada usando uma matriz de coordenadas cartesianas. 10000100001000−1/d1
- -

Exemplos

- -

HTML

- -
<p>Sem perspectiva:</p>
-<div class="no-perspective-box">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
-<p>Com perspectiva (7.5cm):</p>
-<div class="perspective-box">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
- -

CSS

- -
.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);
-}
-
- -

Resultado

- -

{{ EmbedLiveSample('Examples', '250', '350') }}

- -

Compatibilidade com navegadores

- -

Veja o tipo de dado <transform-function> para informações de compatibilidade.

- -

Ver também

- - 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..05b62476e6 --- /dev/null +++ b/files/pt-br/web/css/transform-function/perspective/index.html @@ -0,0 +1,124 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/perspective() +original_slug: Web/CSS/transform-function/perspective() +--- +
{{CSSRef}}
+ +

A função CSS perspective() 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("<transform-function>")}}.

+ +

Sintaxe

+ +

A distância de perspectiva usada porperspective() é especificada por um valor {{cssxref("<length>")}}, 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.

+ +
perspective(d)
+
+ +

Valores

+ +
+
d
+
É um {{cssxref("<length>")}} 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.
+
+ + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
+

Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.

+ 		Essa não é uma transformação linear em ℝ3, e não pode ser representada usando uma matriz de coordenadas cartesianas. 10000100001000−1/d1
+ +

Exemplos

+ +

HTML

+ +
<p>Sem perspectiva:</p>
+<div class="no-perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>Com perspectiva (7.5cm):</p>
+<div class="perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+ +

CSS

+ +
.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);
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Examples', '250', '350') }}

+ +

Compatibilidade com navegadores

+ +

Veja o tipo de dado <transform-function> para informações de compatibilidade.

+ +

Ver também

+ + diff --git a/files/pt-br/web/css/transform-function/rotate()/index.html b/files/pt-br/web/css/transform-function/rotate()/index.html deleted file mode 100644 index 5f7b4270d0..0000000000 --- a/files/pt-br/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -translation_of: Web/CSS/transform-function/rotate() ---- -

{{CSSRef}}

- -

A função CSS rotate() define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados {{cssxref("<transform-function>")}}.

- -

- -

O eixo de rotação passa por uma origem, definido pela propriedade CSS {{ cssxref("transform-origin") }}.

- -

Sintaxe

- -

A quantidade de rotação criada por rotate() é especificado por um {{cssxref("<angle>")}}. Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de point reflection (reflexão do ponto).

- -
rotate(a)
-
- -

Valores

- -
-
a
-
É um {{ cssxref("<angle>") }} representando o ângulo da rotação. Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
- -

Exemplos

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotated</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Examples", "auto", 180)}}

- -

Compatibilidade do navegador

- -

Por favor, veja o tipo de dados <transform-function> para informações de compatibilidade.

- -

Veja também

- - 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..f4cebf0340 --- /dev/null +++ b/files/pt-br/web/css/transform-function/rotate/index.html @@ -0,0 +1,86 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +--- +

{{CSSRef}}

+ +

A função CSS rotate() define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados {{cssxref("<transform-function>")}}.

+ +

+ +

O eixo de rotação passa por uma origem, definido pela propriedade CSS {{ cssxref("transform-origin") }}.

+ +

Sintaxe

+ +

A quantidade de rotação criada por rotate() é especificado por um {{cssxref("<angle>")}}. Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de point reflection (reflexão do ponto).

+ +
rotate(a)
+
+ +

Valores

+ +
+
a
+
É um {{ cssxref("<angle>") }} representando o ângulo da rotação. Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
+ +

Exemplos

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Examples", "auto", 180)}}

+ +

Compatibilidade do navegador

+ +

Por favor, veja o tipo de dados <transform-function> para informações de compatibilidade.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/transform-function/rotate3d()/index.html b/files/pt-br/web/css/transform-function/rotate3d()/index.html deleted file mode 100644 index 28b53b4ecc..0000000000 --- a/files/pt-br/web/css/transform-function/rotate3d()/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/rotate3d() ---- -
{{CSSRef}}
- -

A função CSS rotate3d() 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("<transform-function>")}}.

- -

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 normalizado (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.

- -
Nota: 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.
- -

Sintaxe

- -

A quantidade de rotação criada por rotate3d() é especificada por três {{cssxref("<number>")}} e um {{cssxref("<angle>")}}. Os <number> representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O <angle> representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.

- -
rotate3d(x, y, z, a)
-
- -

Valores

- -
-
x
-
É um {{cssxref("<number>")}} descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
-
y
-
É um {{cssxref("<number>")}} descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
-
z
-
É um {{cssxref("<number>")}} descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
-
a
-
É um {{ cssxref("<angle>") }} 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.
-
- - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas em ℝ2Essa transformação se aplica ao plano 3D e não pode ser representada em um plano.
Coordenadas homogêneas em ℝℙ2
Coordenadas cartesianas em ℝ3 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
Coordenadas homogêneas em ℝℙ3
- -

Exemplos

- -

Rotacionando no eixo y

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotacionado</div>
- -

CSS

- -
body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(0, 1, 0, 60deg);
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}

- -

Rotacionando em um eixo customizado

- -

HTML

- -
<div>Normal</div>
-<div class="rotated">Rotacionado</div>
- -

CSS

- -
body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(1, 2, -1, 192deg);
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}

- -

Compatibilidade com navegadores

- -

Veja o tipo de dado <transform-function> para informações de compatibilidade.

- -

Ver também

- - 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..7f5dd81c3a --- /dev/null +++ b/files/pt-br/web/css/transform-function/rotate3d/index.html @@ -0,0 +1,128 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +--- +
{{CSSRef}}
+ +

A função CSS rotate3d() 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("<transform-function>")}}.

+ +

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 normalizado (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.

+ +
Nota: 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.
+ +

Sintaxe

+ +

A quantidade de rotação criada por rotate3d() é especificada por três {{cssxref("<number>")}} e um {{cssxref("<angle>")}}. Os <number> representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O <angle> representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.

+ +
rotate3d(x, y, z, a)
+
+ +

Valores

+ +
+
x
+
É um {{cssxref("<number>")}} descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
+
y
+
É um {{cssxref("<number>")}} descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
+
z
+
É um {{cssxref("<number>")}} descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
+
a
+
É um {{ cssxref("<angle>") }} 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.
+
+ + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Essa transformação se aplica ao plano 3D e não pode ser representada em um plano.
Coordenadas homogêneas em ℝℙ2
Coordenadas cartesianas em ℝ3 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
Coordenadas homogêneas em ℝℙ3
+ +

Exemplos

+ +

Rotacionando no eixo y

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotacionado</div>
+ +

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}

+ +

Rotacionando em um eixo customizado

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotacionado</div>
+ +

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}

+ +

Compatibilidade com navegadores

+ +

Veja o tipo de dado <transform-function> para informações de compatibilidade.

+ +

Ver também

+ + diff --git a/files/pt-br/web/css/transform-function/scale()/index.html b/files/pt-br/web/css/transform-function/scale()/index.html deleted file mode 100644 index c249bd6931..0000000000 --- a/files/pt-br/web/css/transform-function/scale()/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -tags: - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/scale() ---- -
{{CSSRef}}
- -

A função CSS scale() 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("<transform-function>")}}.

- -

- -

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 (isotrópico) e a proporção do elemento é preservada (isto é uma transformação homotética).

- -

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 ponto de reflexão naquela dimensão. O valor 1 não tem efeito.

- -
Nota: A função scale() apenas redimensiona em 2D Para redimensionar em 3D, use scale3d() ao invés.
- -

Sintaxe

- -

A função scale() é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.

- -
scale(sx)
-
-scale(sx, sy)
-
- -

Valores

- -
-
sx
-
Um {{cssxref("<number>")}} representando a abscissa do vetor de redimensionamento.
-
sy
-
Um {{cssxref("<number>")}} representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão ésx, resultando em um redimensionamento uniforme que preserva a proporção do elemento.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
- -

Exemplos

- -

Redimensionando as dimensões X e Y juntas

- -

HTML

- -
<div>Normal</div>
-<div class="scaled">Redimensionado</div>
- -

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;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

- -

Redimensionando dimensões X e Y separadamente e transladando a origem

- -

HTML

- -
<div>Normal</div>
-<div class="scaled">Redimensionado</div>
- -

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;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

- -

Compatibilidade com navegadores

- -

Veja o dado do tipo <transform-function> para informações de compatibilidade.

- -

Ver também

- - 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..3e18a2e3c6 --- /dev/null +++ b/files/pt-br/web/css/transform-function/scale/index.html @@ -0,0 +1,126 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +--- +
{{CSSRef}}
+ +

A função CSS scale() 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("<transform-function>")}}.

+ +

+ +

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 (isotrópico) e a proporção do elemento é preservada (isto é uma transformação homotética).

+ +

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 ponto de reflexão naquela dimensão. O valor 1 não tem efeito.

+ +
Nota: A função scale() apenas redimensiona em 2D Para redimensionar em 3D, use scale3d() ao invés.
+ +

Sintaxe

+ +

A função scale() é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.

+ +
scale(sx)
+
+scale(sx, sy)
+
+ +

Valores

+ +
+
sx
+
Um {{cssxref("<number>")}} representando a abscissa do vetor de redimensionamento.
+
sy
+
Um {{cssxref("<number>")}} representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão ésx, resultando em um redimensionamento uniforme que preserva a proporção do elemento.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
+ +

Exemplos

+ +

Redimensionando as dimensões X e Y juntas

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Redimensionado</div>
+ +

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;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

+ +

Redimensionando dimensões X e Y separadamente e transladando a origem

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Redimensionado</div>
+ +

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;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

+ +

Compatibilidade com navegadores

+ +

Veja o dado do tipo <transform-function> para informações de compatibilidade.

+ +

Ver também

+ + diff --git a/files/pt-br/web/css/transform-function/translate()/index.html b/files/pt-br/web/css/transform-function/translate()/index.html deleted file mode 100644 index 3a0374d2fe..0000000000 --- a/files/pt-br/web/css/transform-function/translate()/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/translate() ---- -
{{CSSRef}}
- -

A função CSS translate() reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado {{cssxref("<transform-function>")}}.

- -

- -

Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.

- -

Sintaxe

- -
/* Valores <length-percentage> únicos */
-transform: translate(200px);
-transform: translate(50%);
-
-/* Valores <length-percentage> duplos */
-transform: translate(100px, 200px);
-transform: translate(100px, 50%);
-transform: translate(30%, 200px);
-transform: translate(30%, 50%);
-
- -

Valores

- -
-
Valores <length-percentage> únicos
-
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 0. Por exemplo, translate(2) é equivalente a translate(2, 0). Um valor percentual refere-se à largura da caixa de referência definida pela propriedade {{cssxref("transform-box")}}.
-
Valores <length-percentage> duplos
-
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")}}.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas em ℝ2Coordenadas homogêneas emℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
-

Uma translação não é uma transformação linear em ℝ2 e não pode ser representada usando uma matriz de coordenadas cartesianas.

- 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
- -

Sintaxe formal

- -
translate({{cssxref("length-percentage")}} , {{cssxref("length-percentage")}}?)
-
- -

Exemplos

- -

Usando uma conversão de eixo único

- -

HTML

- -
<div>Estático</div>
-<div class="moved">Movido</div>
-<div>Estático</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px); /* Igual a: translateX(10px) ou translate(10px, 0) */
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

- -

Combinando a translação do eixo y e do eixo x

- -

HTML

- -
<div>Estático</div>
-<div class="moved">Movido</div>
-<div>Estático</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px, 10px);
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçõesEstadoComentário
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definição inicial
- -

Compatibilidade com navegadores

- -

Verifique o tipo de dado <transform-function> para informações de compatibilidade.

- -

Veja também

- - 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..8dd01bc26a --- /dev/null +++ b/files/pt-br/web/css/transform-function/translate/index.html @@ -0,0 +1,153 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +tags: + - CSS + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +--- +
{{CSSRef}}
+ +

A função CSS translate() reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado {{cssxref("<transform-function>")}}.

+ +

+ +

Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.

+ +

Sintaxe

+ +
/* Valores <length-percentage> únicos */
+transform: translate(200px);
+transform: translate(50%);
+
+/* Valores <length-percentage> duplos */
+transform: translate(100px, 200px);
+transform: translate(100px, 50%);
+transform: translate(30%, 200px);
+transform: translate(30%, 50%);
+
+ +

Valores

+ +
+
Valores <length-percentage> únicos
+
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 0. Por exemplo, translate(2) é equivalente a translate(2, 0). Um valor percentual refere-se à largura da caixa de referência definida pela propriedade {{cssxref("transform-box")}}.
+
Valores <length-percentage> duplos
+
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")}}.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas emℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
+

Uma translação não é uma transformação linear em ℝ2 e não pode ser representada usando uma matriz de coordenadas cartesianas.

+ 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
+ +

Sintaxe formal

+ +
translate({{cssxref("length-percentage")}} , {{cssxref("length-percentage")}}?)
+
+ +

Exemplos

+ +

Usando uma conversão de eixo único

+ +

HTML

+ +
<div>Estático</div>
+<div class="moved">Movido</div>
+<div>Estático</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px); /* Igual a: translateX(10px) ou translate(10px, 0) */
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

+ +

Combinando a translação do eixo y e do eixo x

+ +

HTML

+ +
<div>Estático</div>
+<div class="moved">Movido</div>
+<div>Estático</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px, 10px);
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesEstadoComentário
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definição inicial
+ +

Compatibilidade com navegadores

+ +

Verifique o tipo de dado <transform-function> para informações de compatibilidade.

+ +

Veja também

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