Flipping Credit Card

<div class="cflip" id="cflip"><div class="cflip-in"><div class="cflip-f cflip-front"><span>💳</span><b>•••• 4829</b></div><div class="cflip-f cflip-back"><b>CVV 314</b><span>Click to flip back</span></div></div></div>

body{background:#f6f7fa}
.cflip{width:280px;height:170px;perspective:1000px;cursor:pointer}
.cflip-in{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d}
.cflip.flip .cflip-in{transform:rotateY(180deg)}
.cflip-f{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;font-family:system-ui,sans-serif}
.cflip-front{background:linear-gradient(135deg,#5b6cff,#a855f7)}
.cflip-front span{font-size:30px}.cflip-front b{font-size:20px;letter-spacing:2px}
.cflip-back{background:linear-gradient(135deg,#1a1f36,#3a4a6b);transform:rotateY(180deg)}
.cflip-back span{font-size:13px;opacity:.7}.cflip-back b{font-size:18px}

var c=document.getElementById('cflip');c.onclick=function(){c.classList.toggle('flip')};