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.

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

<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

Rotar sobre un eje personalizado

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

Especificaciones

Specification
Unknown specification
# funcdef-rotate3d

Compatibilidad con navegadores

BCD tables only load in the browser

Véase también