Circular Slider

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Circular Slider</title>

  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div class="circular-slider">
    <div class="slider-content">
      <div class="slider-item">
        <img src="https://source.unsplash.com/Hn8N4I4eHA0/250x150">
      </div>
      <div class="slider-item">
        <img src="https://source.unsplash.com/uKmRGSTsafg/250x150">
      </div>
      <div class="slider-item">
        <img src="https://source.unsplash.com/-BZlnxwe8eQ/250x150">
      </div>
      <div class="slider-item">
        <img src="https://source.unsplash.com/bFwKehRLXpk/250x150">
      </div>
      <div class="slider-item">
        <img src="https://source.unsplash.com/ebHCU8n7G38/250x150">
      </div>
      <div class="slider-item">
        <img src="https://source.unsplash.com/5F_c9i3JP0I/250x150">
      </div>
    </div>
  </div>
</body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  background: #000;
}

.circular-slider {
  width: 250px;
  height: 150px;
  margin: auto;
  perspective: 1000px;
}

.slider-content {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 10s infinite;
}

.slider-item {
  width: 220px;
  height: 120px;
  position: absolute;
  background: rgba(255,255,255,.5);
  -webkit-box-reflect: below 15px
  -webkit-gradient(linear, left top, left bottom, from(transparent),
                   color-stop(0.5, transparent), to(rgba(255,255,255,.5)));
}

.slider-item img {
  width: 100%;
  height: 100%;
}

.slider-item:nth-child(1) { transform: rotateY(0deg) translateZ(216px); }
.slider-item:nth-child(2) { transform: rotateY(60deg) translateZ(216px); }
.slider-item:nth-child(3) { transform: rotateY(120deg) translateZ(216px); }
.slider-item:nth-child(4) { transform: rotateY(180deg) translateZ(216px); }
.slider-item:nth-child(5) { transform: rotateY(240deg) translateZ(216px); }
.slider-item:nth-child(6) { transform: rotateY(300deg) translateZ(216px); }

@keyframes rotate {
  0%     { transform: translateZ(-216px) rotateY(0deg); }
  16.67% { transform: translateZ(-216px) rotateY(-60deg); }
  33.33% { transform: translateZ(-216px) rotateY(-120deg); }
  50%    { transform: translateZ(-216px) rotateY(-180deg); }
  66.67% { transform: translateZ(-216px) rotateY(-240deg); }
  83.34% { transform: translateZ(-216px) rotateY(-300deg); }
  100%   { transform: translateZ(-216px) rotateY(-360deg); }
}