La idea
Ponemos dos caras una encima de la otra en el mismo sitio. La de atrás nace
ya girada 180°. Al voltear el contenedor, la de adelante se va y la de atrás queda
de frente. La magia que evita ver ambas a la vez es
backface-visibility: hidden: oculta la cara que mira “hacia atrás”.
La estructura (HTML)
<div class="flip">
<div class="flip__in">
<div class="cara frente">...</div>
<div class="cara atras">...</div>
</div>
</div>
El CSS (aquí pasa todo)
.flip{ perspective:900px; }
.flip__in{
transform-style:preserve-3d;
transition:transform 0.6s;
}
.cara{ position:absolute; inset:0; backface-visibility:hidden; }
.atras{ transform:rotateY(180deg); }
.flip:hover .flip__in{ transform:rotateY(180deg); }
Los 3 imprescindibles
perspectiveen el padre → sin esto el giro se ve plano, no en 3D.transform-style: preserve-3d→ para que las caras vivan en el espacio 3D.backface-visibility: hidden→ para no ver la cara de atrás “al revés”.
Perfecta para 🃏
Tarjetas de equipo (foto → bio), precios (plan → detalles), o un “antes/después”. Y como es solo CSS, es ligerísima. Prueba subir la duración para un giro más dramático.