transform: mover, escalar y rotar

La propiedad transform

Hora de darle vida a tus interfaces. transform te permite deformar visualmente un elemento —moverlo, escalarlo, rotarlo o inclinarlo— sin tocar su posición real en el documento. Y es rápida: el navegador la resuelve en la GPU, así que el movimiento sale fluido como la seda.

.caja {
  transform: translate(20px, 10px);  /* mover en X e Y */
}
.icono {
  transform: scale(1.5);             /* agrandar al 150% */
}
.flecha {
  transform: rotate(45deg);          /* girar 45 grados */
}

Las funciones más usadas

• translate(x, y): desplaza el elemento. También translateX() y translateY().
• scale(n): cambia el tamaño (1 = original, 2 = el doble, 0.5 = la mitad).
• rotate(ángulo): gira en grados (deg), por ejemplo rotate(90deg).

Puedes combinar varias funciones separándolas por espacios:

.combo {
  transform: translateX(10px) rotate(15deg) scale(1.2);
}

No afecta al flujo del documento

Esto es clave: un transform es puramente visual. El elemento ocupa el mismo hueco que antes; los demás elementos no se recolocan aunque lo muevas o lo agrandes. Por eso es perfecto para efectos sin "saltos": el vecino de al lado ni se entera de que tu botón acaba de crecer.

El punto de referencia (origen) de la transformación se controla con transform-origin (por defecto, el centro del elemento).

Ejemplos

Combinar transformaciones

const t = "translateX(10px) rotate(15deg) scale(1.2)";
console.log(t);