JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="card active" style="background:orange;z-index:4">
    1
  </div>
  <div class="card"  style="background:tan;z-index:3">
    2
  </div>
  <div class="card" style="background:pink;z-index:2">
    3
  </div>
   <div class="card" style="background:blue;z-index:1">
    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;
  }
}


.card + .card {
  transform: rotate(2deg) translate3d(-50%, -50%, 0);
}
.card + .card + .card {
  transform: rotate(4deg) translate3d(-50%, -50%, 0);
}
.card + .card + .card + .card {
  transform: rotate(6deg) translate3d(-50%, -50%, 0);
}

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");
    }
  }, 1);
  $(".card.active")
    .addClass("animation")
    .one(
      "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
      function () {
        
        $(".card").removeClass("animation");
        
      }
    );
});