Coverflow 3D Carousel

<div class="nuda-gc2-coverflow" role="group" aria-roledescription="carousel" aria-label="Coverflow gallery">
  <div class="nuda-gc2-coverflow__stage">
    <div class="nuda-gc2-coverflow__card" role="group" aria-roledescription="slide" aria-label="1 of 4" style="background:linear-gradient(135deg,#9d6dff,#ff6dd4);--nuda-gc2-cf-i:-1"></div>
    <div class="nuda-gc2-coverflow__card is-active" role="group" aria-roledescription="slide" aria-label="2 of 4" style="background:linear-gradient(135deg,#62b6ff,#6ee7b7);--nuda-gc2-cf-i:0"></div>
    <div class="nuda-gc2-coverflow__card" role="group" aria-roledescription="slide" aria-label="3 of 4" style="background:linear-gradient(135deg,#ffb45e,#ff5e7a);--nuda-gc2-cf-i:1"></div>
    <div class="nuda-gc2-coverflow__card" role="group" aria-roledescription="slide" aria-label="4 of 4" style="background:linear-gradient(135deg,#e4ff54,#22d3ee);--nuda-gc2-cf-i:2"></div>
  </div>
</div>

const cards = document.querySelectorAll('.nuda-gc2-coverflow__card');
let active = 1;

const render = () => {
  cards.forEach((card, i) => {
    card.style.setProperty('--nuda-gc2-cf-i', i - active);
    card.classList.toggle('is-active', i === active);
  });
};

document.querySelector('.nuda-gc2-coverflow').addEventListener('click', (e) => {
  const i = [...cards].indexOf(e.target);
  if (i > -1) { active = i; render(); }
});

.nuda-gc2-coverflow {
  width: 100%;
  max-width: 280px;
}

.nuda-gc2-coverflow__stage {
  position: relative;
  height: 140px;
  perspective: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-gc2-coverflow__card {
  position: absolute;
  width: 100px;
  height: 120px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.7);
  transform: translateX(calc(var(--nuda-gc2-cf-i,0) * 62px)) rotateY(calc(var(--nuda-gc2-cf-i,0) * -38deg)) scale(.82);
  transition: transform .5s cubic-bezier(.16,1,.3,1),filter .5s;
  filter: brightness(.6);
  z-index: 1;
}

.nuda-gc2-coverflow__card.is-active {
  transform: translateX(0) rotateY(0) scale(1);
  filter: brightness(1);
  z-index: 2;
  box-shadow: 0 24px 48px -14px rgba(0,0,0,.8);
}

@media (prefers-reduced-motion:reduce) {
  .nuda-gc2-coverflow__card {
    transition: none;
  }
}