Múltiples Transformaciones

Cuando una sola transformación no es suficiente

Los diseñadores de interacción que trabajan en productos como Figma, Linear o Vercel saben que la diferencia entre una interfaz que se siente "bien" y una que se siente "premium" está en los detalles compuestos. No es solo que el botón crezca, sino que mientras crece también se eleva y su sombra se profundiza. No es solo que la tarjeta se eleve, sino que también rota levemente revelando un ángulo, como si la sostuvieras en la mano.

Para lograr esas sensaciones complejas necesitas combinar múltiples transformaciones en una sola propiedad. Y hay dos estrategias: combinarlas en el mismo elemento, o coordinarlas entre elementos diferentes.

Combinando en el mismo elemento

Como aprendimos en la lección de Sintaxis, encadenar múltiples funciones en una sola línea transform es tan sencillo como separarlas por espacios. El desafío es el orden.

El orden matemático en el que CSS aplica las transformaciones es de derecha a izquierda (aunque visualmente se lean de izquierda a derecha). Esto significa que en:

transform: translateX(50px) rotate(45deg);

Primero se aplica el rotate(45deg) y luego el translateX(50px). Pero como el elemento ya fue rotado, su eje X ya no apunta a la derecha original de la pantalla, sino a la dirección en la que apunta el elemento rotado. Esto puede resultar en movimientos inesperados.

La convención estándar (la más predecible) es: primero traslaciones, luego rotaciones, luego escalas.

Coordinando múltiples elementos

La técnica que más eleva la calidad percibida de una interfaz es usar el hover de un elemento padre para activar transformaciones en múltiples elementos hijos, cada uno con su propia velocidad y movimiento. Un ejemplo perfecto son los botones de CTA (Call To Action) con ícono de flecha:

• El contenedor del botón se eleva ligeramente: translateY(-4px).
• La flecha interior se dispara hacia la derecha: translateX(6px).
• Cada elemento tiene su propio transition-timing-function, haciendo que el movimiento compuesto se sienta coreografiado, no mecánico.

Resultados distintos según el orden

Para ilustrar la importancia del orden, imagina que quieres mover un elemento 100px y luego rotarlo 90 grados. El resultado de translateX(100px) rotate(90deg) es diferente al de rotate(90deg) translateX(100px). En el segundo caso, el elemento termina 100px más abajo (porque sus ejes fueron rotados antes de trasladarse).

No hay un "correcto" absoluto: hay el que produce el resultado que tú quieres. La práctica y la experimentación son la única forma de dominar esto.