Колода карточек

<div class="deck">
  <div class="card">3</div>
  <div class="card">2</div>
  <div class="card">1</div>   <!-- последняя в DOM = верхняя -->
</div>
<button class="next">Следующая →</button>

<style>
.deck { position: relative; width: 300px; aspect-ratio: 3/4; }
.card { position: absolute; inset: 0; border-radius: 18px;
  transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .5s;
  /* --n = глубина в колоде: смещение и уменьшение */
  transform: translateY(calc(var(--n) * -14px))
             scale(calc(1 - var(--n) * .05)); }
.card.fly { transform: translateX(120%) rotate(16deg) !important;
  opacity: 0; }                       /* верхняя улетает вправо */
</style>

<script>
var deck = document.querySelector(".deck");
function layout() {
  var cards = deck.querySelectorAll(".card");
  cards.forEach(function (c, i) {
    c.style.setProperty("--n", cards.length - 1 - i);
    c.style.zIndex = i;
  });
}
layout();
document.querySelector(".next").addEventListener("click", function () {
  var top = deck.querySelector(".card:last-child");
  top.classList.add("fly");
  setTimeout(function () {
    top.classList.remove("fly");
    deck.insertBefore(top, deck.firstChild);   // в конец колоды
    layout();
  }, 480);
});
</script>

Сделай колоду карточек: карточки absolute друг на друге, глубина в переменной --n задаёт transform translateY(-n*14px) scale(1-n*.05) — стопка с выглядывающими краями. По кнопке/свайпу верхняя получает класс fly (translateX(120%) rotate(16deg) + opacity 0), через 480мс возвращается без класса и переставляется в начало DOM (низ колоды), после чего пересчитываются --n и z-index — колода бесконечная. transition 0.5s cubic-bezier(0.16,1,0.3,1).