.cube {
  width: 200px;
  height: 200px;
  margin: 30px auto;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 10s linear infinite;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}
                  
.box {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.box1 {
  transform: translateZ(100px);
}

.box2 {
  transform: rotateY(90deg) translateX(100px);
  transform-origin: right;
}

.box3 {
  transform: rotateY(180deg) translateZ(100px);
}

.box4 {
  transform: rotateY(-90deg) translateX(-100px);
  transform-origin: left;
}

.box5 {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top;
}

.box6 {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom;
}
                  
.cube img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}
                  
@keyframes rotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotateY(90deg) rotateZ(90deg);
  }
  40% {
    transform: rotateY(180deg) rotateZ(-90deg);
  }
  60% {
    transform: rotateY(270deg) rotateZ(90deg);
  }
  80% {
    transform: rotateY(360deg) rotateZ(-90deg);
  }
}