rotate3d()

La función rotate3d() de CSS define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. La cantidad de movimiento está definida por el ángulo especificado; si es positivo, el movimiento será en el sentido de las agujas del reloj, si es negativo, será contrario a las agujas del reloj.

En el espacio tridimencional, las rotaciones tienen tres grados de libertad, que 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 de CSS. Si el vector no está normalizado, lo que significa que la suma del cuadrado de sus tres coordenadas no es igual a 1, el mismo será normalizado internamente. Un vector no-normalizable, como es el caso del vector nulo, [0, 0, 0], causará que la rotación no sea aplicada, sin que esto invalide la propiedad CSS en su totalidad.

Contrario a las rotaciones en el plano, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas es crucial.

Sintaxis

La cantidad de rotación creada por rotate3d() está especificada por tres <number>s y un <angle>. El <number>s 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 Coordenadas homogéneas en ℝℙ2 Coordenadas cartesianas en ℝ3 Coordenadas homogéneas en ℝℙ3
Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano. 1+(1-cos(a))(x2-1)z·sen(a)+xy(1-cos(a))-y·sen(a)+xz·(1-cos(a))-z·sen(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sen(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001

Ejemplos

Rotar sobre el eje-X

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

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

Resultado

Rotar sobre un eje personalizado

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

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

Resultado

Compatibilidad con los navegadores

Por favor vea el tipo de datos <transform-function> para información sobre compatibilidad.

Ver también