rotate3d() - CSS | MDN

Toggle sidebar

Theme

OS default
Light
Dark

Español

Remember language Learn more

rotate3d()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.

La función 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

transform: rotate3d(0);

transform: rotate3d(1, 1, 1, 45deg);

transform: rotate3d(2, -1, -1, -0.2turn);

transform: rotate3d(0, 1, 0.5, 3.142rad);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 550px;
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

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 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.

css

rotate3d(x, y, z, a)

Valores

Es un <number> que describe la coordenada-x del vector y denota el eje de rotación.

Es un <number> que describe la coordenada-y del vector y denota el eje de rotación.

Es un <number> que describe la coordenada-z del vector y denota el eje de rotación.

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 ) ) ( 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)

Ejemplos

Rotar sobre el eje-Y

HTML

html
<div>Normal</div>
<div class="rotated">Rotado</div>

CSS

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

html
<div>Normal</div>
<div class="rotated">Rotado</div>

CSS

css
body {
  perspective: 800px;
}

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 20 mar 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content

rotate3d()

In this article

Pruébalo

Sintaxis

Valores

Ejemplos

Rotar sobre el eje-Y

HTML

CSS

Resultado

Rotar sobre un eje personalizado

HTML

CSS

Resultado

Especificaciones

Compatibilidad con navegadores

Véase también

Help improve MDN