--- 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() ---

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 homogêneas em ℝℙ²
Coordenadas cartesianas em ℝ²	Essa transformação se aplica ao plano 3D e não pode ser representada em um plano.
Coordenadas cartesianas em ℝ³	$(\begin{matrix} 1 + (1 - cos(a))(x^{2} - 1) & z \cdot sin(a)+ x y (1 - cos(a)) & - y \cdot sin(a) + x z \cdot (1 - cos(a)) \\ - z \cdot sin(a) + x y \cdot (1 - cos(a)) & 1+(1-cos(a))(y2-1) & x \cdot sin(a) + y z \cdot (1 - cos(a)) & ysin(a) + xz(1-cos(a)) & -xsin(a)+yz(1-cos(a)) & 1+(1-cos(a))(z2-1) & t & 0 & 0 & 0 & 1 \end{matrix})$
Coordenadas homogêneas em ℝℙ³

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

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

Compatibilidade com navegadores

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

Ver também

{{cssxref("transform")}}
{{cssxref("<transform-function>")}}