rotate3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

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 <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 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 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 <number> e um <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 <number> descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.

y

É um <number> descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.

z

É um <number> descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.

a

É um <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 ℝ2 Essa 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

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

CSS

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

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

CSS

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