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 `<transform-function>` (en-US).

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 (en-US) 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>` (en-US). 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>` (en-US) 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))(

x
2

-1)


z
·sin(
 a)+
 x
y(1
 -cos(
 a))


-
y
·sin(
 a)
 +
x
z
·(1
 -cos(
 a))


-
z
·sin(
 a)
 +
x
y
·(1
 -cos(
 a))

1+(1-cos(a))(y2-1)

x
·sin(
 a)
 +
y
z
·(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

 |
| 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>` (en-US) para informações de compatibilidade.

Ver também
----------

* `transform`
* `<transform-function>` (en-US)