JSFiddle - React, Tailwind, and code Playground

by Danilo Metzker

HTML

<div class="container">
  <div class="carousel">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

CSS

body{
  background: radial-gradient(76.49% 62.98% at 50% 50%, #000366 0%, #000000 100%);
  min-height: 100vh;
  margin: 0 auto;
}
.container{
  display: flex;
  justify-content: center;
  padding: 160px 0;
}

.carousel{
  width: 64px;
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(2000px) rotateX(-10deg) rotateY(0deg);
  /* animation: circular-rotate 18s linear infinite; */
  transition: 1s;
}

@keyframes circular-rotate{
  to{
    transform: perspective(2000px) rotateX(-10deg) rotateY(360deg);
  }
  
}

.card{
  position: absolute;
  box-sizing: border-box;
  width: 92px;
  height: 166px;
  background: linear-gradient(144.08deg, rgba(255, 255, 255, 0.085) 9.01%, rgba(255, 255, 255, 0.0714) 73.75%);
  box-shadow: 5px 5px 64px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  /* -webkit-box-reflect: below 20px linear-gradient(transparent 60%, rgba(255,255,255,0.4)); */
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-transform-style: preserve-3d;
  transition: 0.3s;
  
  /* -webkit-backface-visibility: hidden; */
  /* backface-visibility: hidden; */
  /* filter: blur(5px); */
  /* opacity: 0.7; */
}

JavaScript

var paused = false; // global
const carousel = document.querySelector('.carousel');
const cards = document.querySelectorAll('.card');
const card_angle = 360 / cards.length;

cards.forEach( (card, i) => {
	card.style.transform = `rotate3d(0,1,0,${(i+1) * card_angle}deg) translateZ(192px)`;
});



let index = 0;
setInterval( () => {
	if (paused === false){
    cards.forEach( card => {
      card.classList.remove('active');
    })
    carousel.style.transform = `perspective(2000px) rotateX(-10deg) rotateY(-${(index+1) * card_angle}deg)`;
    cards[index % cards.length ].classList.add('active');

    index++;
  }
}, 2000 );