3D Card Flip

Card flips to reveal back side.

.flip { width:200px; height:140px; perspective:800px; cursor:pointer; }
.flip-in { width:100%; height:100%; transition:transform 0.6s; transform-style:preserve-3d; position:relative; }
.flip:hover .flip-in { transform:rotateY(180deg); }
.flip-f,.flip-b { position:absolute; inset:0; backface-visibility:hidden; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.flip-f { background:#1c1c1f; border:1px solid #333; }
.flip-b { background:#8b5cf6; transform:rotateY(180deg); }