Efecto de tarjeta 3D con giro

Funciones

• Giro alrededor del eje Y (horizontal) o del eje X (vertical)
• Duración y distancia de perspectiva ajustables: cuanto menor es la perspectiva, más se comprime el giro
• Tamaño de la tarjeta ajustable, reflejado al momento en la vista previa
• Pasa el ratón por la vista previa para ver el giro
• Las tres propiedades clave van anotadas en el resultado, cada una con el motivo de por qué es imprescindible
• Las dos caras están rotuladas en la vista previa, así se ve en cuál estás
• Incluye automáticamente un respaldo para `prefers-reduced-motion`
• Todo se calcula en tu navegador: no se sube nada

Cómo se usa

1. Elige el eje: el horizontal (rotateY) es lo habitual; el vertical (rotateX) encaja en listas de tarjetas
2. Ajusta la perspectiva: unos 900px se ven naturales; por debajo de 400 la deformación salta a la vista
3. Fija la duración; entre 400 y 900ms resulta cómodo en una interfaz
4. Pasa el ratón por la vista previa y copia el código

Preguntas frecuentes

¿Por qué el giro se ve aplastado en lugar de girar?

Casi con seguridad `perspective` está en el sitio equivocado. Tiene que ir en el elemento padre de la tarjeta (`.flip-scene` en el código), no en la tarjeta. Puesta en la tarjeta, el navegador no da perspectiva a la transformación, así que un giro de 90° sobre el eje Y se convierte en «anchura comprimida a cero»: se ve plano. Es el fallo más común de este efecto y muy reconocible: a mitad de giro la tarjeta queda reducida a una línea.

¿Por qué a mitad de giro se ve el texto en espejo?

Porque falta `backface-visibility: hidden`. Las dos caras se solapan en la misma posición (ambas con `inset: 0`), y sin esa propiedad también se dibuja el dorso del elemento: pasado el 90° estás viendo el reverso de la cara trasera, es decir, texto en espejo. Con ella, un elemento que mira hacia otro lado se oculta entero, así que en cada instante solo se ve una cara. Hay que ponerla en las dos caras; con una sola sigue asomando.

¿Cómo se dispara el giro en una pantalla táctil?

`hover` no es fiable en táctil (algunos navegadores lo interpretan como «el primer toque»). Por eso el resultado incluye también el cambio de clase: `.flip-card.is-flipped`. Basta con alternar esa clase desde JavaScript al hacer clic, lo que de paso resuelve el acceso con teclado (engancha el cambio al clic y al Intro de un botón). Para máxima solidez, conviértelo en un elemento `<button>` de verdad.

¿Cuánto debe durar el giro?

Entre 400 y 900ms es lo típico en una interfaz. Por debajo de 300ms no se ve el giro y resulta brusco; por encima de un segundo la gente espera a que termine. Ojo también con la legibilidad: durante el giro las dos caras están inclinadas y no se leen, así que la información crítica no debería estar solo en una cara, o conviene que el usuario pueda fijar una cara con un clic en vez de mantener el ratón encima. La duración y la curva de Bézier se ajustan juntas: un rebote comprimido en poco tiempo parece un temblor.