--- title: rotate3d() slug: Web/CSS/transform-function/rotate3d translation_of: Web/CSS/transform-function/rotate3d() original_slug: Web/CSS/transform-function/rotate3d() browser-compat: css.types.transform-function.rotate3d --- {{CSSRef}} La [función](/es/docs/Web/CSS/CSS_Functions) **`rotate3d()`** de [CSS](/es/docs/Web/CSS) define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. Su resultado es un tipo de dato {{cssxref("<transform-function>")}}. {{EmbedInteractiveExample("pages/css/rotate3d.html")}} 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 {{cssxref("transform-origin")}}. Si el vector no está _normalizado_ (ej. si la suma del cuadrado de sus tres coordenadas no es igual a 1), el {{glossary("user agent")}} 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 {{cssxref("<number>")}}s y un {{cssxref("<angle>")}}. El `` representa las coordenadas _x_, _y_ y _z_ del vector, denotando los ejes de la rotación. El `` 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. ```css 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 homogéneas en ℝℙ^2
Coordenadas cartesianas en ℝ^2	Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano.
Coordenadas cartesianas en ℝ^3	$(\begin{matrix} 1 + (1 - cos (a)) (x^{2} - 1) & z \cdot sin (a) + x y (1 - cos (a)) & - y \cdot sin (a) + x z \cdot (1 - cos (a)) \\ - z \cdot sin (a) + x y \cdot (1 - cos (a)) & 1 + (1 - cos (a)) (y2 - 1) & x \cdot sin (a) + y z \cdot (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 \end{matrix})$
Coordenadas homogéneas en ℝℙ^3

## Ejemplos ### Rotar sobre el eje-Y #### HTML ```html

Normal

Rotado

``` #### CSS ```css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-color: pink; } ``` #### Resultado {{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}} ### Rotar sobre un eje personalizado #### HTML ```html

Normal

Rotado

``` #### CSS ```css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(1, 2, -1, 192deg); background-color: pink; } ``` #### Resultado {{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}} ## Especificaciones {{Specifications}} ## Compatibilidad con navegadores {{Compat}} ## Véase también - {{cssxref("transform")}} - {{cssxref("<transform-function>")}}