rotate3d()

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.

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.

rotate3d(x, y, z, a)

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	$\left(\begin{array}{ccc}1+(1-cos(a\left)\right)(x^2-1)& z·sin\left(a\right)+xy(1-cos(a\left)\right)& -y·sin\left(a\right)+xz·(1-cos(a\left)\right)\\ -z·sin\left(a\right)+xy·(1-cos(a\left)\right)& 1+(1-cos(a\left)\right)(\mathrm{y2}-1)& x·sin\left(a\right)+yz·(1-cos(a\left)\right)\\ ysin\left(a\right)+\mathrm{xz}(1-cos(a\left)\right)& -xsin\left(a\right)+\mathrm{yz}(1-cos(a\left)\right)& 1+(1-cos(a\left)\right)(\mathrm{z2}-1)& t\\ 0& 0& 0& 1\end{array}\right)$
Coordenadas homogéneas en ℝℙ^3

HTML

<div>Normal</div>
<div class="rotated">Rotado</div>

CSS

body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(0, 1, 0, 60deg);
  background-color: pink;
}

Resultado

HTML

<div>Normal</div>
<div class="rotated">Rotado</div>

CSS

body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: pink;
}

Resultado

• transform
• <transform-function>