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.

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.		$\left(\begin{array}{ccc}1+(1-cos(a))(x^2-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)& t\\ 0& 0& 0& 1\end{array}\right)$

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

• transform
• <transform-function>