Translate Y
Redactado por
Sebastian V. Fecha de publicación
29/06/2024
Tiempo de lectura
6 min
Tema
CSS Transform
El efecto de elevación que seduce al usuario
Hay una razón por la que las tarjetas de producto en Shopify, las tarjetas de artículo en Medium y las opciones de precio en Stripe hacen exactamente lo mismo cuando pasas el ratón por encima: se elevan ligeramente. No suben mucho, apenas unos 8 o 12 píxeles. Pero ese pequeño movimiento cambia por completo la percepción del usuario.
Esta técnica universal se llama "elevación por hover" y se implementa exclusivamente con translateY() y una sombra más profunda. Es la piedra angular del diseño de interfaces interactivas premium.
¿Qué es translateY?
translateY() mueve un elemento a lo largo del eje Y (la línea vertical) sin alterar nada a su alrededor. El eje Y en un navegador funciona así:
- Valores Negativos (ej. -12px): Mueven el elemento hacia arriba. Es el valor que más usarás para efectos de elevación en hover.
- Valores Positivos (ej. 12px): Mueven el elemento hacia abajo. Ideal para animar entradas de elementos desde fuera de la pantalla por la parte superior.
La psicología detrás del efecto
En el mundo físico, cuando acercas la mano a un objeto, este parece elevarse para recibirla (piensa en un botón físico que sobresale, listo para ser presionado). Nuestros cerebros, acostumbrados a cientos de millones de años de física real, están hardwireados para interpretar un objeto que se eleva como algo que está "disponible para interactuar".
Al combinar translateY(-12px) con un box-shadow más grande y profundo en el estado hover, creas una ilusión perfecta de elevación que activa instintivamente el deseo de hacer clic.
Animaciones de entrada: el fade-in que cae
Más allá del hover, translateY() es fundamental para las animaciones de entrada (enter animations). Una técnica muy usada en landings premium es la de hacer que los elementos aparezcan cayendo suavemente desde arriba:
El elemento empieza con translateY(-30px) y opacity: 0. Al cargar la página, se anima a translateY(0) y opacity: 1. Esta combinación es tan efectiva que prácticamente todas las landing pages de startups de alto calibre la usan.
Casos reales
- E-commerce (Shopify, WooCommerce): Tarjetas de producto que se elevan con
translateY(-8px)en el hover. - Blogs y Medios (Medium, Substack): Tarjetas de artículos que suben ligeramente al hacer hover.
- SaaS Dashboards: Widgets de métricas que reaccionan visualmente para indicar que son clickeables.
- Menús desplegables (Dropdowns): Suelen animarse apareciendo desde arriba con
translateY(-10px)atranslateY(0).
Consejo profesional
El 'sweet spot' para un efecto de elevación en hover de tarjeta es entre -6px y -16px. Menos de 6px pasa desapercibido. Más de 16px se percibe como un error. Ajusta según el tamaño de la tarjeta: tarjetas pequeñas con valores pequeños, tarjetas grandes con valores mayores. No olvides añadir una transición también al box-shadow para completar la ilusión.
Elevación en acción
<div class="contenedor-cards">
<div class="card-producto">
<div class="card-img"></div>
<h4>Producto Premium</h4>
<p>$49.99</p>
</div>
</div>Producto Premium
$49.99
Pasa el ratón sobre la tarjeta. Observa cómo se eleva suavemente con translateY(-12px) y la sombra se vuelve más profunda para completar la ilusión.
Errores comunes
Eleva tus cards
Toma una de las tarjetas de tu proyecto y aplica el efecto de elevación. Prueba diferentes valores entre -6px y -20px para encontrar el punto dulce de tu diseño.