Translate X

El deslizamiento perfecto

Imagina que estás construyendo el dashboard de un banco. Cuando el usuario hace una transferencia exitosa, una notificación debe deslizarse elegantemente desde el borde derecho de la pantalla, quedarse unos segundos, y volver a desaparecer.

Podrías intentar mover esa notificación cambiando su propiedad right de -300px a 20px. Pero como vimos antes, eso obligaría al navegador a recalcular toda la geometría de la página frame a frame. El resultado sería un movimiento entrecortado, como si la notificación estuviera "temblando" al entrar.

La solución profesional es usar translateX().

¿Qué es translateX?

translateX() mueve un elemento a lo largo del eje X (la línea horizontal). Piensa en la pantalla como un plano cartesiano:

• Valores Positivos (ej. 100px): Mueven el elemento hacia la derecha.
• Valores Negativos (ej. -100px): Mueven el elemento hacia la izquierda.
• Valor 0: Es la posición original, sin alteraciones.

El poder de los porcentajes

Usar píxeles está bien, pero el verdadero superpoder de translateX() se desbloquea cuando usas porcentajes. Y aquí hay un concepto que confunde al 90% de los desarrolladores junior: el porcentaje se calcula en base al tamaño del propio elemento, no de su contenedor.

Si tienes una tarjeta que mide 300px de ancho y le aplicas transform: translateX(100%), la tarjeta se moverá exactamente 300px hacia la derecha. Esto es increíblemente útil porque te permite ocultar elementos fuera de la pantalla sin importar en qué dispositivo lo estés viendo o cuánto texto contengan.

Casos reales de uso

• Sidebars (Menús laterales): Un menú móvil que está oculto a la izquierda tiene translateX(-100%). Cuando el usuario toca el botón de hamburguesa, lo cambiamos a translateX(0).
• Carruseles y Sliders: Para pasar de la imagen 1 a la imagen 2, mueves el contenedor entero usando translateX(-100%), -200%, etc.
• Notificaciones (Toast): Deslizándose desde la derecha (translateX(100%)) hacia su posición original (translateX(0)).