Pasa el ratón
Frente
¡Hola!
Este es el dorso de la tarjeta.
Tarjeta que gira en 3D
Una tarjeta que da la vuelta en 3D al pasar el ratón y muestra una segunda cara por detrás.
Ajustes
Código
<div class="uv-kf"><div class="in"><div class="f"><h3>Pasa el ratón</h3><p>Frente</p></div><div class="b"><h3>¡Hola!</h3><p>Este es el dorso de la tarjeta.</p></div></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Cards
Dónde usarlo
Una flip card esconde una segunda capa de información detrás de la primera. Viene bien en páginas de equipo (foto delante, una bio corta detrás), en tarjetas de vocabulario de un curso de idiomas o en una página de servicios donde el frente nombra el servicio y el dorso cuenta qué incluye. Gira con un ligero rebote.
En pantallas táctiles, que gire al tocar depende del navegador, así que no escondas nada imprescindible detrás. La tarjeta tiene una altura fija: deja el texto del dorso en unas pocas líneas o se saldrá.