<div class="slider_box">
  <div class="slider">
    <div class="slide x"></div>
    <div class="slide y"></div>
    <div class="slide z"></div>
  </div>
</div>

html, body {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider_box {
  width: 120px; 
  height: 120px; 
  perspective: 300px;
  transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
}
.slider {
  width: 100%; 
  height: 100%; 
  transform-style: preserve-3d;
  transform: rotateY(0deg) rotateX(0deg);
}
.slide, 
.slide:after, 
.slide:before {
  display: block; 
  width: 100%; 
  height: 100%;
  background: url('https://kdong1224.github.io/dothome21/class/img/img01.jpg');
  position: absolute;
  transform-style: preserve-3d;
  background-size: cover;
  background-position: center;
}
.slide.x {
  transform: rotateY(90deg);
} 
.slide.x:after {
  content: '';
  background-image: url('https://kdong1224.github.io/dothome21/class/img/img03.jpg');
  transform: translateZ(60px) rotateZ(-90deg);
}
.slide.x:before {
  content: '';
  background-image: url(https://kdong1224.github.io/dothome21/class/img/img02.jpg');
  transform: translateZ(-60px) rotateZ(-90deg);
}
.slide.y {
  transform: rotateX(90deg);
} 
.slide.y:after {
  content: '';
  background-image: url('https://kdong1224.github.io/dothome21/class/img/img06.jpg');
  transform: translateZ(60px) scale(-1);
}
.slide.y:before {
  content: '';
  background-image: url('https://kdong1224.github.io/dothome21/class/img/img08.jpg');
  transform: translateZ(-60px);
}
.slide.z {
  transform: rotateX(0);
} 
.slide.z:after {
  content: '';
  background-image: url('https://kdong1224.github.io/dothome21/class/img/img10.jpg');
  transform: translateZ(60px);
}
.slide.z:before {
  content: '';
  background-image: url('https://kdong1224.github.io/dothome21/class/img/img15.jpg');
  transform: translateZ(-60px);
}
.slider {
  -webkit-animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
  animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
}
@keyframes rotate {
  0%, 10% {transform: rotateY(0deg) rotateX(0deg);}
  15%, 20% {transform: rotateY(180deg) rotateX(0deg);}
  25%, 35% {transform: rotateY(180deg) rotateX(270deg);}
  40%, 50% {transform: rotateY(180deg) rotateX(90deg);}
  55%, 65% {transform: rotateY(-90deg) rotateX(90deg);}
  70%, 80% {transform: rotateY(90deg) rotateX(90deg);}
  90%, 95% {transform: rotateY(0deg) rotateX(90deg);}
}