JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="card active z4" style="background:orange">1</div>
  <div class="card z3"  style="background:tan">2</div>
  <div class="card z2" style="background:pink">3</div>
   <div class="card z1" style="background:blue">4</div>
</div>

<div class="btn2">
  animate
</div>

SCSS

@keyframes animation {
  0% {
    transform: rotate(0) translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
    z-index: 10;
  }
  15% {
    opacity: 1;
    z-index: 10;
    transform: rotate(2deg) translate3d(-50%, -50%, 0) scale(1.1);
  }
  50% {
    transform: rotate(-40deg) translate3d(-320%, -50%, 0) scale(0.1);
    opacity: 0;
    z-index: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: rotate(0) translate3d(-50%, -50%, 0) scale(1);
    opacity: 1;
    z-index: 0;
  }
}

.animation {
  animation: animation 1s forwards cubic-bezier(0.83, 0, 0.17, 1);
}
.card {
  transform-origin: center;
  transform: rotate(0) translate3d(-50%, -50%, 0);
  transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);

  &.active {
    transform: rotate(0) translate3d(-50%, -50%, 0)!important;
  }
}

// --------------------------------------------
// --------------- DEMO STYLES ----------------
// --------------------------------------------

html {
  height: 100%;
}
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  * {
    box-sizing: inherit;
  }
}

.btn2 {
  position: fixed;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%) translateY(-50%);
  background: coral;
  cursor: pointer;
  color: white;
  padding: 24px;
  text-transform: uppercase;
  z-index: 50;
  zoom: 1.2;
}

.container {
  width: 420px;
  height: 480px;
  background: #eee;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  padding: 20px;
}

.card {
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  max-width: 320px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  &.active {
    box-shadow: 0 0 20px rgba(black, 0.25);
    border: 1px solid black;
  }
}


.z4 { 
  z-index: 4;
}
.z3 { 
  transform: rotate(2deg) translate3d(-50%, -50%, 0);
  z-index: 3; 
}
.z2 {
  transform: rotate(4deg) translate3d(-50%, -50%, 0);
  z-index: 2; 
}
.z1 { 
  transform: rotate(6deg) translate3d(-50%, -50%, 0);
  z-index: 1; 
}

JavaScript

$(".btn2").click(function () {
  
  setTimeout(function () {
  
    var $next = $(".card.active").removeClass("active").next(".card");
    if ($next.length) {
      $next.addClass("active");
    } else {
      $(".card:first").addClass("active");
    }
    
    $(".card").removeClass("z1 z2 z3 z4");
    var z=4;
    $(".card.active").addClass("z"+z);
    $(".card.active").nextAll(".card").each((i, e) => { z--; $(e).addClass("z"+z); });
    $($(".card.active").prevAll(".card").get().reverse()).each((i, e) => { z--; $(e).addClass("z"+z); });
    
    $(".card").each((i, e) => console.log(i, $(e).text(), e.className));

  }, 1);
  $(".card.active")
    .addClass("animation")
    .one(
      "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
      function () {        
        $(".card").removeClass("animation");
      }
    );
});