/* Adding transform-style CSS
               property to the boxes */
.imageBox {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: animate 20s linear infinite;
}

.imageBox:hover {
    animation-play-state: paused;
}

/* Adding keyframes for animation */
@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}

/* Adding CSS to all the span
   tags for animation */
.imageBox span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform:
            rotateY(calc(var(--i) * 45deg)) translateZ(350px);
    -webkit-box-reflect:
            below 0px linear-gradient(transparent, transparent, #0004);
}

/* Adding object-fit CSS
property to all the images */
.imageBox span img {
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
    width: 100px;
    object-fit: cover;
}