transform 2D: mover, escalar y rotar sin romper nada

Hasta hoy, mover un elemento significaba pelear con el layout: márgenes que empujan vecinos, position que saca del flujo. transform es otra cosa: mueve, agranda, gira e inclina lo que sea SIN que el resto de la página se entere. Es la propiedad sobre la que se construye TODA la animación web profesional — y este módulo entero.

La ficha que se levanta del tablero

Las cuatro operaciones

Un detalle que vale oro: en translate, los porcentajes se refieren al tamaño del propio elemento, no del padre. translateX(-50%) significa "muévete la mitad de TU ancho hacia la izquierda" — de ahí sale el centrado absoluto translate(-50%, -50%) que usaste en el módulo 7, que funciona sin importar cuánto mida el elemento.

Míralas en acción

<div class="pista">
<div class="caja original">original</div>
<div class="caja t">translate</div>
<div class="caja s">scale</div>
<div class="caja r">rotate</div>
<div class="caja k">skew</div>
</div>
<p class="nota">Pasa el cursor sobre cada caja. Fíjate: ninguna empuja a sus vecinas — el espacio de cada una queda reservado.</p>

body { font-family: system-ui; padding: 24px; background: #f8fafc; }
.pista { display: flex; gap: 14px; flex-wrap: wrap; }
.caja { width: 90px; height: 90px; display: grid; place-items: center; background: #6d28d9; color: white; font-size: 13px; font-weight: 600; border-radius: 12px; transition: transform 200ms ease-out; }
.original { background: #475569; }
.t:hover { transform: translateY(-14px); }
.s:hover { transform: scale(1.15); }
.r:hover { transform: rotate(12deg); }
.k:hover { transform: skewX(-14deg); }
@media (prefers-reduced-motion: reduce) { .caja { transition: none; } }
.nota { font-size: 13px; color: #64748b; margin-top: 16px; max-width: 46ch; }

Por qué transform no rompe el layout

Cuando cambias width, margin o top, el navegador tiene que RECALCULAR la geometría de la página: qué mide cada caja, qué empuja a qué (el trabajo que en el módulo 3 llamamos "el flujo"). transform se salta todo eso: el layout ya está calculado y congelado, y la transformación se aplica al final, como una operación de dibujo sobre el resultado. Consecuencias directas:

1. Es barato: no dispara recálculos en cadena. Por eso es LA propiedad para animar (la regla formal llega en el módulo 11).
2. No afecta a los vecinos: puedes escalar una tarjeta al hacer hover sin que la galería entera baile.
3. El espacio original se conserva: si trasladas un elemento 200px, su hueco sigue ahí. Si eso no es lo que quieres, la herramienta era position (módulo 7), no transform.

Combinar: el orden ES el resultado

Las transformaciones se aplican en orden y cada una hereda el sistema de coordenadas que dejó la anterior: después de rotar 45°, "la derecha" del elemento apunta en diagonal. Si combinas y el resultado se ve raro, lo primero que debes revisar es el orden.

Y una modernización que te va a simplificar la vida: translate, scale y rotate existen también como propiedades individuales, y al ser independientes puedes cambiar una sin repetir las otras:

Soportadas en todos los navegadores desde 2022. En este curso verás ambas sintaxis: la clásica en transform (la que usan el 95% de los tutoriales y código existente) y las individuales cuando separar aporta claridad.

Mini-reto

Abre tu periódico "El Observador" y dale vida a las tarjetas de noticia: translateY(-6px) con una sombra sutil al hacer hover. Luego rompe algo a propósito: reemplaza el translateY por margin-top: -6px y observa cómo la fila entera tiembla. Sentir esa diferencia en tu propio layout vale más que releer la teoría.

Qué sigue

Girar está fácil... hasta que necesitas girar SOBRE un punto concreto: una manecilla de reloj no rota sobre su centro. Ese punto de pivote tiene nombre — transform-origin — y en el corazón del módulo 9 ya lo usaste sin la teoría. Ahora la teoría.