Aprende translate, rotate, scale, skew, perspectiva y preserve-3d para crear interacciones fluidas y composiciones visuales avanzadas.
Las transformaciones se aplican en la fase de composición, por lo que suelen rendir mejor que cambios de layout como top/left o width/height.
En 2D trabajarás con translate, rotate, scale y skew; en 3D entran perspective, rotateX/rotateY y transform-style: preserve-3d.
transform-origin define el pivote del movimiento y puede convertir una animación correcta en una animación confusa si está mal elegido.
La clave profesional no es usar muchos efectos, sino usar transformaciones con intención: jerarquía visual, feedback y continuidad espacial.
Primero comunica estado, después añade estilo.
translate se usa para microinteracciones y ajustes visuales suaves; rotate y scale son muy útiles para feedback de botones, chips y tarjetas clicables.
Evita valores extremos: una buena transformación debe ser rápida, legible y coherente con la acción del usuario.
Regla práctica: usa duraciones cortas (120ms-220ms) para hover/focus y combina transform con estados claros de color/sombra.
La perspectiva vive en el contenedor; la rotación, en el objeto.
perspective controla la profundidad percibida: cuanto menor el valor, más dramático se ve el efecto 3D.
transform-style: preserve-3d permite que los hijos mantengan su posición espacial. Sin esta propiedad, el efecto suele verse plano.
En componentes reales (tarjetas, cubos de producto, iconos), combina 3D con transiciones suaves para evitar mareo visual.
Cambiar el pivote cambia el significado del movimiento.
El valor por defecto es center center. Si cambias a top left o left center, la sensación pasa de giro centrado a bisagra lateral.
Para menús desplegables suele funcionar transform-origin: top center; para paneles laterales, left center o right center.
Cuando el origen es parte de la intención visual del diseño, documéntalo en el componente para que no se rompa en refactors.
Animar mejor también es respetar al usuario.
Prefiere transform y opacity para animaciones frecuentes: suelen ser más fluidas porque no fuerzan reflow completo.
Evita animaciones continuas innecesarias. En interfaces densas, demasiada animación reduce claridad cognitiva.
Respeta preferencias de movimiento con media query: @media (prefers-reduced-motion: reduce) y ofrece una versión estática o con transición mínima.
Aprende translate, rotate, scale, skew, perspectiva y preserve-3d para crear interacciones fluidas y composiciones visuales avanzadas.
Código del tema: display: grid; gap: 1rem;
Primero comunica estado, después añade estilo.
translate se usa para microinteracciones y ajustes visuales suaves; rotate y scale son muy útiles para feedback de botones, chips y tarjetas clicables.
Evita valores extremos: una buena transformación debe ser rápida, legible y coherente con la acción del usuario.
Regla práctica: usa duraciones cortas (120ms-220ms) para hover/focus y combina transform con estados claros de color/sombra.
La perspectiva vive en el contenedor; la rotación, en el objeto.
perspective controla la profundidad percibida: cuanto menor el valor, más dramático se ve el efecto 3D.
transform-style: preserve-3d permite que los hijos mantengan su posición espacial. Sin esta propiedad, el efecto suele verse plano.
En componentes reales (tarjetas, cubos de producto, iconos), combina 3D con transiciones suaves para evitar mareo visual.
Cambiar el pivote cambia el significado del movimiento.
El valor por defecto es center center. Si cambias a top left o left center, la sensación pasa de giro centrado a bisagra lateral.
Para menús desplegables suele funcionar transform-origin: top center; para paneles laterales, left center o right center.
Cuando el origen es parte de la intención visual del diseño, documéntalo en el componente para que no se rompa en refactors.
Animar mejor también es respetar al usuario.
Prefiere transform y opacity para animaciones frecuentes: suelen ser más fluidas porque no fuerzan reflow completo.
Evita animaciones continuas innecesarias. En interfaces densas, demasiada animación reduce claridad cognitiva.
Respeta preferencias de movimiento con media query: @media (prefers-reduced-motion: reduce) y ofrece una versión estática o con transición mínima.
Refuerza por que el orden de funciones transform cambia el resultado visual.
