Docs ejecutables de CSS: Rotar con CSS

Q: ¿Cómo se rota un elemento en CSS?

Usa transform: rotate(45deg); o la propiedad separada rotate: 45deg;. Los ángulos positivos giran en el sentido de las agujas del reloj y los negativos en sentido contrario, alrededor del centro del elemento salvo que cambies transform-origin.

Q: ¿Qué diferencia hay entre transform: rotate() y la propiedad rotate?

Dibujan el mismo resultado. La propiedad rotate es independiente de transform, así que una regla de hover puede cambiar scale o translate sin quitar la rotación, y cada una puede tener su propia transición. Juntas actúan como transform: translate() rotate() scale(), sin importar en qué orden las declares.

Q: ¿Cómo roto una imagen 90 grados en CSS?

Agrega transform: rotate(90deg); (o rotate: 90deg;) al img. La imagen conserva su espacio original en el layout, así que una imagen vertical rotada a horizontal puede superponerse a sus vecinos; dale a su contenedor espacio para el tamaño rotado.

Q: ¿Cómo hago que un elemento gire con CSS?

Define @keyframes spin { to { rotate: 360deg; } } y aplica animation: spin 1s linear infinite;. Usa linear para que la velocidad sea constante, y hazlo más lento o detenlo con prefers-reduced-motion: reduce.

Q: ¿Cómo pongo un texto en vertical con CSS?

Para una etiqueta vertical, writing-mode: vertical-rl suele ser mejor que rotate(90deg), porque también cambia el layout: el elemento ocupa espacio vertical en lugar de superponerse. Usa rotate para pequeñas inclinaciones decorativas.

Rotar un elemento

Dos formas, el mismo resultado: la función rotate() dentro de transform, o la propiedad rotate sola. Los ángulos positivos giran en el sentido de las agujas del reloj:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotate</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .row { display: flex; gap: 50px; padding: 30px; }
    .box { width: 90px; height: 60px; display: grid; place-items: center; color: white; }
    .a { transform: rotate(45deg); background: #2563eb; }
    .b { rotate: 45deg; background: #16a34a; }
    .c { rotate: -15deg; background: #f59e0b; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div class="box a">transform</div>
    <div class="box b">rotate: 45deg</div>
    <div class="box c">-15deg</div>
  </div>
</body>
</html>

Las cajas azul y verde están giradas exactamente igual, 45 grados en el sentido de las agujas del reloj alrededor de su centro. La caja ámbar tiene un ángulo negativo, así que se inclina en sentido contrario. La rotación nunca mueve el layout: cada caja sigue ocupando su hueco original de 90 por 60, y por eso los elementos rotados pueden superponerse a sus vecinos.

Unidades de ángulo

Unidad	Círculo completo	90 grados
`deg`	`360deg`	`90deg`
`turn`	`1turn`	`0.25turn`
`rad`	`6.2832rad`	`1.5708rad`
`grad`	`400grad`	`100grad`

deg es la opción habitual; turn se lee bien para los giros (rotate: 1turn). Los ángulos mayores de 360 están permitidos e importan en las animaciones: rotate(720deg) en un keyframe gira dos veces. Escribe siempre la unidad: rotate(45) es inválido y se ignora.

Arrastra el control deslizante para ver un ángulo en cada unidad:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angle slider</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .stage { display: grid; place-items: center; height: 160px; background: #f3f4f6; margin: 10px 0; }
    #arrow { width: 110px; height: 14px; background: #2563eb; border-radius: 7px; position: relative; }
    #arrow::after { content: ""; position: absolute; inset-inline-end: -10px; top: -8px; border: 15px solid transparent; border-inline-start: 18px solid #2563eb; border-inline-end: 0; }
  </style>
</head>
<body>
  <label>angle <input id="a" type="range" min="-360" max="360" value="30"></label>
  <div class="stage"><div id="arrow"></div></div>
  <p id="out"></p>
  <script>
    const input = document.getElementById('a');
    const update = () => {
      const deg = Number(input.value);
      document.getElementById('arrow').style.rotate = deg + 'deg';
      document.getElementById('out').textContent =
        deg + 'deg = ' + (deg / 360).toFixed(3) + 'turn = ' + (deg * Math.PI / 180).toFixed(4) + 'rad';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Rotar alrededor de una esquina: transform-origin

Un elemento gira alrededor de su centro por defecto. transform-origin mueve el pivote. La aguja de un reloj pivota sobre su extremo, no sobre su centro:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>transform-origin</title>
  <style>
    .face { position: relative; width: 160px; height: 160px; border-radius: 50%; background: #e5e7eb; }
    .hand {
      position: absolute;
      left: 76px;              /* 80px center minus half the 8px width */
      top: 20px;
      width: 8px;
      height: 60px;
      border-radius: 4px;
      background: #111827;
      transform-origin: bottom center; /* pivot at the center of the face */
      rotate: 120deg;
    }
    .pin { position: absolute; left: 74px; top: 74px; width: 12px; height: 12px; border-radius: 50%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="face"><div class="hand" id="hand"></div><div class="pin"></div></div>
</body>
</html>

El extremo inferior de la aguja queda sobre el pasador ámbar en el centro de la esfera, y rotate: 120deg la gira hasta las cuatro. Quita la línea de transform-origin y la aguja gira alrededor de su propio centro, fuera del pasador.

Rotar texto y etiquetas verticales

Una pequeña inclinación con rotate está bien para una insignia o una etiqueta adhesiva. Para una etiqueta realmente vertical es mejor writing-mode, porque cambia el layout: el elemento se vuelve alto y angosto en lugar de superponerse a lo que tiene al lado.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical text</title>
  <style>
    body { font-family: system-ui, sans-serif; padding-top: 24px; }
    .row { display: flex; gap: 12px; align-items: flex-start; }
    .label { background: #2563eb; color: white; padding: 6px 10px; }
    .rotated { rotate: -90deg; }
    .vertical { writing-mode: vertical-rl; rotate: 180deg; }
    .content { background: #e5e7eb; padding: 10px; }
    .badge { display: inline-block; rotate: -6deg; background: #f59e0b; padding: 4px 10px; margin: 16px 0 0 8px; }
  </style>
</head>
<body>
  <div class="row"><div class="label rotated" id="r">Section</div><div class="content">rotate: -90deg overlaps</div></div>
  <div class="row" style="margin-top: 20px;"><div class="label vertical" id="v">Section</div><div class="content">writing-mode takes vertical space</div></div>
  <span class="badge">New</span>
  <p id="out"></p>
  <script>
    const size = (id) => { const el = document.getElementById(id); return el.offsetWidth + ' x ' + el.offsetHeight; };
    document.getElementById('out').textContent = 'layout box: rotated ' + size('r') + ', writing-mode ' + size('v');
  </script>
</body>
</html>

El indicador muestra el tamaño de layout de cada etiqueta. La rotada sigue ocupando su caja original, ancha y baja: deja un hueco vacío a su lado y sobresale por arriba y por abajo de su fila, sobre lo que haya ahí. La de writing-mode ocupa una caja alta y angosta. Agregar rotate: 180deg hace que se lea de abajo arriba, que es la dirección habitual de una etiqueta vertical.

Rotar un ícono al hacer clic o hover

Girar una flecha 180 grados es la forma estándar de mostrar que una sección está abierta. Combina rotate con una transición:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Rotating arrow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font: inherit; border: 1px solid #111827; background: white; border-radius: 6px; }
    .chevron { width: 10px; height: 10px; border-inline-end: 2px solid #111827; border-bottom: 2px solid #111827; rotate: 45deg; transition: rotate 0.25s ease-out; }
    .toggle[aria-expanded="true"] .chevron { rotate: 225deg; }
  </style>
</head>
<body>
  <button class="toggle" aria-expanded="false">Details <span class="chevron" aria-hidden="true"></span></button>
  <script>
    const btn = document.querySelector('.toggle');
    btn.addEventListener('click', () => btn.setAttribute('aria-expanded', btn.getAttribute('aria-expanded') !== 'true'));
  </script>
</body>
</html>

El chevron es un cuadrado con dos bordes, girado 45 grados para que apunte hacia abajo. Cuando el botón está expandido pasa a 225 grados, apuntando hacia arriba, y la transición anima la media vuelta. El atributo aria-expanded controla el estilo, así que el estado visual y el estado que anuncian los lectores de pantalla nunca pueden contradecirse.

Un loader que gira

Un giro es una rotación de 0 a 360 grados, repetida con una función de tiempo linear para que la velocidad nunca cambie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spinner</title>
  <style>
    @keyframes spin {
      to { rotate: 360deg; }
    }
    .spinner {
      width: 36px;
      height: 36px;
      border: 4px solid #e5e7eb;
      border-top-color: #2563eb;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .spinner { animation-duration: 3s; } /* slower, still shows activity */
    }
  </style>
</head>
<body>
  <div class="spinner" role="status" aria-label="Loading"></div>
</body>
</html>

Con solo un keyframe to, la animación empieza en la rotación propia del elemento (ninguna) y termina en 360deg, e infinite la repite sin saltos porque 360deg se ve igual que 0. Para las personas que pidieron a su sistema movimiento reducido, el spinner gira tres veces más lento. Hay más sobre keyframes en la página de animaciones.

Rotación 3D: rotateX, rotateY

rotateX() inclina un elemento hacia atrás alrededor del eje horizontal y rotateY() lo gira alrededor del eje vertical, como una puerta. Sin perspectiva solo se ven aplastados; perspective en el padre agrega profundidad:

.scene { perspective: 600px; }
.card  { transform: rotateY(35deg); }
.flip  { transform: rotateY(180deg); backface-visibility: hidden; } /* card flip */

Para reflejar un elemento en lugar de girarlo, usa scale: -1 1 (un volteo horizontal). Una rotación de 180 grados lo pone cabeza abajo, que no es lo mismo.

Errores comunes

Rotar un <span> o un <a> que no se mueve. Los elementos inline simples ignoran las transformaciones. Agrega display: inline-block.
Una rotación que desaparece en hover. Una regla de hover con transform: scale(1.1) reemplaza a transform: rotate(...). Usa las propiedades separadas rotate y scale, o enumera las dos funciones.
Esperar que el layout deje espacio. Una imagen rotada conserva su caja sin rotar y se superpone a sus vecinos. Dale al contenedor el tamaño rotado, o usa writing-mode para el texto.
Spinners con ease. La función de tiempo por defecto acelera y frena en cada vuelta. Usa linear.
Rotar alrededor del punto equivocado. Define transform-origin antes de ajustar el ángulo.

Preguntas frecuentes

¿Cómo se rota un elemento en CSS?

Usa transform: rotate(45deg); o la propiedad separada rotate: 45deg;. Los ángulos positivos giran en el sentido de las agujas del reloj y los negativos en sentido contrario, alrededor del centro del elemento salvo que cambies transform-origin.

¿Qué diferencia hay entre transform: rotate() y la propiedad rotate?

Dibujan el mismo resultado. La propiedad rotate es independiente de transform, así que una regla de hover puede cambiar scale o translate sin quitar la rotación, y cada una puede tener su propia transición. Juntas actúan como transform: translate() rotate() scale(), sin importar en qué orden las declares.

¿Cómo roto una imagen 90 grados en CSS?

Agrega transform: rotate(90deg); (o rotate: 90deg;) al img. La imagen conserva su espacio original en el layout, así que una imagen vertical rotada a horizontal puede superponerse a sus vecinos; dale a su contenedor espacio para el tamaño rotado.

¿Cómo hago que un elemento gire con CSS?

Define @keyframes spin { to { rotate: 360deg; } } y aplica animation: spin 1s linear infinite;. Usa linear para que la velocidad sea constante, y hazlo más lento o detenlo con prefers-reduced-motion: reduce.

¿Cómo pongo un texto en vertical con CSS?

Para una etiqueta vertical, writing-mode: vertical-rl suele ser mejor que rotate(90deg), porque también cambia el layout: el elemento ocupa espacio vertical en lugar de superponerse. Usa rotate para pequeñas inclinaciones decorativas.

Conceptos relacionados