JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="carousel">
    <div class="item a"></div>
    <div class="item b"></div>
    <div class="item c"></div>
    <div class="item d"></div>
    <div class="item e"></div>
    <div class="item f"></div>
  </div>
</div>

CSS

html,
body {
  margin: 0px 0px 0px 0px;
  width: 100%;
}

body {
  background: #333;
  padding: 70px 0;
  font: 15px/20px Arial, sans-serif;
}

.container {
  margin: 0 auto;
  width: 250px;
  height: 200px;
  position: relative;
  perspective: 1000px;
}

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  background: #000;
  width: 250px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  border-radius: 10px;
}

.a {
  transform: rotateY(0deg) translateZ(250px);
  background-image: url(http://img2.1001golos.ru/ratings/363000/362381/pic1.jpg);
  background-repeat: no-repeat;
  background-size: 250px;
  background-position: 0px -50px;
}

.b {
  transform: rotateY(60deg) translateZ(250px);
  background-image: url(https://d37ta6l1gshlok.cloudfront.net/photo/7529/2747529-3c1c3ec201767d35a8fce728dca3f359-0-preview.jpg);
  background-repeat: no-repeat;
  background-size: 250px;
  background-position: 0px -50px;
}

.c {
  transform: rotateY(120deg) translateZ(250px);
  background-image: url(https://img-android.lisisoft.com/imgmic/6/7/2576-i-nanjing.myring.SMSRingtone.jpg);
  background-repeat: no-repeat;
  background-size: 280px;
  background-position: -20px -50px;
}

.d {
  transform: rotateY(180deg) translateZ(250px);
  background-image: url(http://img2.1001golos.ru/ratings/321000/320709/pic1.jpg);
  background-repeat: no-repeat;
  background-size: 250px;
  background-position: 0px -40px;
}

.e {
  transform: rotateY(240deg) translateZ(250px);
  background-image: url(http://img2.1001golos.ru/ratings/319000/318193/pic1.jpg);
  background-repeat: no-repeat;
  background-size: 260px;
  background-position: 0px -20px;
}

.f {
  transform: rotateY(300deg) translateZ(250px);
  background-image: url(http://www.tuning.bg/public/upload/news/4488/300x300/New-Aston-Martin-Vanquish-12.jpg);
 ...

JavaScript

var deg = 0;
var carousel = document.getElementsByClassName('carousel')[0];

var interval = setTimeout(function rotate() {
 
  if (deg > -420) return interval = setTimeout(rotate, 1000);

  deg = 0;
  carousel.style =
    "-webkit-transform : rotateY(" + deg + "deg);" +
    "-moz-transform : rotateY(" + deg + "deg);" +
    "-o-transform : rotateY(" + deg + "deg);" +
    "transform : rotateY(" + deg + "deg);" +
    "transition : 0s;";

  setTimeout(rotate, 50);
}, 1000);