JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <h3 class="title">Узнайте Вашу карту дня</h3>
  <div id="cards"></div>
</div>

CSS

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: sans-serif;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.title {
  margin: 0 0 100px;
}

#cards {
  position: relative;
  width: 90px;
  height: 140px;
  transform-style: preserve-3d;
}
#cards.choosen .card {
  top: 0 !important;
  left: 0 !important;
  box-shadow: inset 0 0 300px rgba(255, 255, 255, 0.2);
}
#choosen-card {
  width: 200%;
  height: 200%;
  position: absolute;
  top: -50%;
  left: -50%;
  border-radius: 15px;
  background: #000;
  transform: translate3d(0,0,2px) scale(0, 0);
  background: url(http://www.darktarot.com/images/cards/801px/judgement.png);
  background-size: 100% 100%;
}
#cards.choosen .card[style*='width'] {
  transition: .8s ease-in-out;
}

.card {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  transition: all .3s ease-in-out, top .8s ease-in-out, left .8s ease-in-out;
  cursor: pointer;
  box-shadow: inset 0 0 300px rgba(255, 255, 255, 0.2);
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
}
.card-front {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://cdn.shopify.com/s/files/1/0200/7616/products/playing-cards-bicycle-125-anniversary-ed-2_grande.png?v=1474344841);
  background-size: 100% 100%;
  border-radius: 10px;
}
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(http://www.darktarot.com/images/cards/801px/judgement.png);
  background-size: 100% 100%;
  transform: rotateX(180deg) translate3d(0, 0, 1px);
  border-radius: 10px;
  filter: blur(0px);
}
.card:not[style*='left'] {
  pointer-events: none;
}
.card:hover {
  box-shadow: inset 0 0 300px rgba(240, 98, 146, .4);
}

JavaScript

const cards = document.querySelector('#cards');

const cardsList = ["card1", "card2", "card3", "card4", "card5", "card6"];

cardsList.map((item, index, list) => {
  const fitInCircle = (angleFn) => {
  	const radius = list.length * 13;
    
  	return `${Math[angleFn](2 * Math.PI * index / list.length - Math.PI / 2) * radius}px`;
  }
  
  const element = document.createElement('div');
  element.classList.add('card');
  element.innerHTML = '<div class="card-front"></div><div class="card-back"></div>'
  
  element.style.transform = `rotate(${2 * Math.PI * index / list.length}rad) rotate3d(1, -1000, 1, -0.1rad)`;
  
  setTimeout(() => {
    element.style.top = fitInCircle('sin');
    element.style.left = fitInCircle('cos');
  }, 400);
  
  cards.appendChild(element);
  
  element.onclick = (e) => {
  	console.log(item)
    cards.classList.add('choosen');
    element.style.transform = `translate3d(-25%, -25%, 1000px) rotate3d(1,0,0,180deg)`;
    element.style.width = '200%';
    element.style.height = '200%';
  }
});