<div id="pg_slider">
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

html, body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#pg_slider {
  width: 200px;
  height: 100px;
  position: relative;
  perspective: 1000px;
  > div {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    animation: rotateAni 20s infinite linear;
    &:hover {
      animation-play-state: paused;
    }
    > div {
      width: 200px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -100px;
      margin-top: -50px;
      box-sizing: border-box;
      border: 1px solid transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      &:nth-of-type(1) {
        transform: rotateY(0deg) translateZ(175px);
        background-color: rgba(#bbbbbb, 0.8);
      }
      &:nth-of-type(2) {
        transform: rotateY(60deg)  translateZ(175px);
        background-color: rgba(#ff0000, 0.8);
      }
      &:nth-of-type(3) {
        transform: rotateY(120deg)  translateZ(175px);
        background-color: rgba(#00ff00, 0.8);
      }
      &:nth-of-type(4) {
        transform: rotateY(180deg)  translateZ(175px);
        background-color: rgba(#0000ff, 0.8);
      }
      &:nth-of-type(5) {
        transform: rotateY(240deg)  translateZ(175px);
        background-color: rgba(#ffff00, 0.8);
      }
      &:nth-of-type(6) {
        transform: rotateY(300deg)  translateZ(175px);
        background-color: rgba(#ff00ff, 0.8);
      }
    }
  }
}

@keyframes rotateAni {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}