02 Capítulo 2 · Lección 7

Rotate

Redactado por
Author Sebastian V.
Fecha de publicación

05/07/2024

Tiempo de lectura

6 min

Tema

CSS Transform

Todo gira, incluso la web

Existe un icono en particular que todos los usuarios de internet reconocen instintivamente: un círculo con una flecha, o simplemente un arco de círculo. Lo interpretamos como "cargando", "procesando", "espera un momento". No hay texto que lo acompañe. No hace falta. El giro continuo es un lenguaje universal.

Todos esos spinners, loaders y indicadores de carga que ves en aplicaciones como Gmail, Figma o Notion están hechos con exactamente dos líneas de CSS: un @keyframes que va de rotate(0deg) a rotate(360deg), y una propiedad animation que lo ejecuta en bucle infinito.

¿Qué es rotate()?

rotate() gira un elemento alrededor de su punto de origen (que por defecto es su centro exacto). El ángulo de rotación se expresa en grados (deg):

  • Rotaciones positivas (ej. 45deg): Giran el elemento en sentido horario.
  • Rotaciones negativas (ej. -45deg): Giran el elemento en sentido antihorario.
  • 360deg: Una vuelta completa, volviendo al punto de partida. La base de todos los spinners.
  • Unidades adicionales: También puedes usar turn (1turn = 360deg) o rad (radianes).

Transformaciones que convierten iconos

Una de las aplicaciones más elegantes de rotate() en las interfaces modernas es la conversión de un icono en otro mediante la rotación. El ejemplo más clásico: el icono de menú hamburguesa (≡) que se convierte en una X cuando el menú se abre.

Si tienes tres líneas paralelas y rotas el contenedor 45 grados, las líneas diagonales que se cruzan crean visualmente una X. Esto elimina la necesidad de cambiar el icono SVG, intercambiar imágenes o manipular el DOM: una simple rotación lo hace todo.

Casos reales

  • Loaders y Spinners: De 0deg a 360deg en bucle infinito. El más usado de todos.
  • Iconos de acordeón: Una flecha (›) rota 90deg cuando el contenido se despliega para indicar que apunta hacia abajo.
  • Interruptores hamburguesa → X: El menú hamburguesa rota para convertirse en un botón de cierre.
  • Efectos decorativos: Estrellas, formas geométricas que giran como elemento visual de landing pages.
  • Cartas y tarjetas flip: Combinadas con rotateY en 3D para el efecto de voltear una tarjeta.

Consejo profesional

Para los loaders, usa siempre linear como función de timing (animation-timing-function: linear). Los eases como ease-in o ease-out hacen que el spinner acelere y frene en cada vuelta, lo que se percibe como un movimiento raro y artificial. La rotación continua debe ser siempre constante.

Rotación en contexto real

> _ 
<div class="loader-contenedor">
  <div class="loader-spinner"></div>
  <p>Procesando tu solicitud...</p>
</div>
> _

Procesando tu solicitud...

Un spinner clásico construido con solo CSS. Observa cómo un borde de color en un círculo, rotando continuamente, crea la ilusión perfecta de carga.

Errores comunes

01
Usar animation-timing-function: ease en un spinner ease hace que el spinner acelere y desacelere en cada ciclo. La rotación debe ser siempre constante (linear) para que el usuario perciba un proceso continuo y no errático.
02
Rotar sin considerar el transform-origin Por defecto, los elementos rotan desde su centro. Si tu diseño requiere que el elemento gire desde una esquina (como una aguja de reloj), necesitarás cambiar el transform-origin antes de aplicar rotate().
03
Animar en rotación valores como width Una trampa común es querer hacer un loader animando el width de una barra. Es ineficiente. Usa rotate() en @keyframes, que opera en el compositor de la GPU.

Construye un loader

Crea tu propio spinner de carga usando solo CSS. Luego construye un acordeón donde la flecha del título rota 180 grados cuando el contenido está visible.

01 Crea un div cuadrado con border-radius: 50%
02 Aplica un border superior de color (border-top-color: #color)
03 Crea @keyframes que anime de rotate(0) a rotate(360deg)
04 Asigna animation: nombre 0.8s linear infinite al elemento