rotate3d()
==========

La función (en-US) **`rotate3d()`** de CSS define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. Su resultado es un tipo de dato `<transform-function>`.

Pruébalo
--------

En el espacio tridimencional, las rotaciones tienen tres grados de libertad, juntos describen un ángulo de rotación. El ángulo de rotación está definido por un vector [x, y, z] y pasa por el origen (como lo define la propiedad `transform-origin`. Si el vector no está *normalizado* (ej. si la suma del cuadrado de sus tres coordenadas no es igual a 1), el user agent (en-US) lo normalizará internamente. Un vector no-normalizable, como es el caso del vector nulo, [0, 0, 0], causará que la rotación no sea aplicada, pero sin que esto invalide la propiedad CSS en su totalidad.

**Nota:** Contrario a las rotaciones en el plano 2D, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas impacta al resultado.

Sintaxis
--------

La cantidad de rotación creada por `rotate3d()` está especificada por tres `<number>`s y un `<angle>`. El `<number>` representa las coordenadas *x*, *y* y *z* del vector, denotando los ejes de la rotación. El `<angle>` representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto.


```css
rotate3d(x, y, z, a)
```

Valores
-------

`x`

Es un `<number>` que describe la coordenada-x del vector y denota el eje de rotación.

`y`

Es un `<number>` que describe la coordenada-y del vector y denota el eje de rotación.

`z`

Es un `<number>` que describe la coordenada-z del vector y denota el eje de rotación.

`a`

Es un `<angle>` que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj.



|  |  |
| --- | --- |
| Coordenadas cartesianas en ℝ^2 | Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano. |
| Coordenadas homogéneas en ℝℙ^2 |
| Coordenadas cartesianas en ℝ^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
)
)

y
sin
(
a
)
+
xz
(
1
-
cos
(
a
)
)

-
x
sin
(
a
)
+
yz
(
1
-
cos
(
a
)
)

1
+
(
1
-
cos
(
a
)
)
(
z2
-
1
)

t

0

0

0

1

)

 |
| Coordenadas homogéneas en ℝℙ^3 |  |

Ejemplos
--------

### Rotar sobre el eje-Y

#### HTML


```html
<div>Normal</div>
<div class="rotated">Rotado</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

### Rotar sobre un eje personalizado

#### HTML


```html
<div>Normal</div>
<div class="rotated">Rotado</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

Especificaciones
----------------

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotate3d |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* `transform`
* `<transform-function>`