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/rotate3d/index.html | 128 +++++++++++++++++++++ 1 file changed, 128 insertions(+) create mode 100644 files/pt-br/web/css/transform-function/rotate3d/index.html (limited to 'files/pt-br/web/css/transform-function/rotate3d/index.html') 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

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