rotate3d()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
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 |
|
| 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
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.