--- title: rotate3d() slug: Web/CSS/transform-function/rotate3d() tags: - CSS - Funciones CSS - Referencia translation_of: Web/CSS/transform-function/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 {{ cssxref("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 {{cssxref("<number>")}}s y un {{cssxref("<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 {{cssxref("<number>")}} que describe la coordenada-x del vector y denota el eje de rotación.
y: Es un {{cssxref("<number>")}} que describe la coordenada-y del vector y denota el eje de rotación.
z: Es un {{cssxref("<number>")}} que describe la coordenada-z del vector y denota el eje de rotación.
a: Es un {{ cssxref("<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 ℝ²	Coordenadas homogéneas en ℝℙ²	Coordenadas cartesianas en ℝ³	Coordenadas homogéneas en ℝℙ³
Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano.		$(\begin{matrix} 1 + (1 - cos(a))(x^{2} - 1) & z \cdot sen(a)+ x y (1 - cos(a)) & - y \cdot sen(a) + x z \cdot (1 - cos(a)) \\ - z \cdot sen(a) + x y \cdot (1 - cos(a)) & 1+(1-cos(a))(y2-1) & x \cdot sen(a) + y z \cdot (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{matrix})$

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

{{cssxref("transform")}}
{{cssxref("<transform-function>")}}