<div class="scd-flip">
  <div class="scd-flip__stage">
    <div class="scd-flip__card scd-flip__card--c3"><div class="scd-flip__side scd-flip__side--front"><span class="scd-flip__sm">CARD</span><span class="scd-flip__big">03</span></div><div class="scd-flip__side scd-flip__side--back"><span class="scd-flip__big">&#9733;</span></div></div>
    <div class="scd-flip__card scd-flip__card--c2"><div class="scd-flip__side scd-flip__side--front"><span class="scd-flip__sm">CARD</span><span class="scd-flip__big">02</span></div><div class="scd-flip__side scd-flip__side--back"><span class="scd-flip__big">&#9733;</span></div></div>
    <div class="scd-flip__card scd-flip__card--c1"><div class="scd-flip__side scd-flip__side--front"><span class="scd-flip__sm">TAP TO FLIP</span><span class="scd-flip__big">01</span></div><div class="scd-flip__side scd-flip__side--back"><span class="scd-flip__big">&#9733;</span></div></div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto+Mono&display=swap');

.scd-flip, .scd-flip *, .scd-flip *::before, .scd-flip *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-flip {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: #0a0e17;
  font-family: 'Roboto Mono', monospace;
}
.scd-flip__stage {
  position: relative;
  width: 230px; height: 320px;
  perspective: 1100px;
}
.scd-flip__card {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3,.9,.3,1);
  cursor: pointer;
}
.scd-flip__side {
  position: absolute; inset: 0;
  border-radius: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
}
.scd-flip__side--front { background: linear-gradient(150deg,#232526,#414345); color: #fff; }
.scd-flip__side--back { background: linear-gradient(150deg,#ff512f,#dd2476); color: #fff; transform: rotateY(180deg); }
.scd-flip__big { font-family: 'Anton', sans-serif; font-size: 3rem; letter-spacing: .02em; }
.scd-flip__sm { opacity: .6; font-size: .75rem; letter-spacing: .2em; }
.scd-flip__card.is-flipped { transform: rotateY(180deg); }
.scd-flip__card--c1 { transform: translateY(0) scale(1); z-index: 3; }
.scd-flip__card--c1.is-flipped { transform: translateY(0) scale(1) rotateY(180deg); }
.scd-flip__card--c2 { transform: translateY(14px) scale(.94); z-index: 2; }
.scd-flip__card--c2.is-flipped { transform: translateY(14px) scale(.94) rotateY(180deg); }
.scd-flip__card--c3 { transform: translateY(28px) scale(.88); z-index: 1; }
.scd-flip__card--c3.is-flipped { transform: translateY(28px) scale(.88) rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .scd-flip__card { transition: none !important; }
}

(() => {
  const root = document.querySelector('.scd-flip');
  if (!root) return;
  root.querySelectorAll('.scd-flip__card').forEach((f) => {
    f.addEventListener('click', (e) => {
      e.stopPropagation();
      f.classList.toggle('is-flipped');
    });
  });
})();