Rotating 3D Image Previewer Cube using CSS

body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: #1e6f0a;
}
  
.cube {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 10s linear infinite;
}
  
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  
.box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.9;
}
  

.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;
}
  

@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);
    }
}