body {
    background: rgb(53, 72, 77);
    background: linear-gradient(90deg, rgba(53, 72, 77, 1) 0%, rgba(40, 74, 91, 1) 100%);
}

:root {
    --deft: 100px;
}

.wrapper {
    margin-top: 250px;
    perspective: 1000px;
}

.cube-box {
    width: 200px;
    height: 200px;
    margin: auto;
    transform-style: preserve-3d;
}

.cube-box img {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 1;
    transition: 0.5s;
    object-fit: cover;
}


.cube-box img:nth-child(1) {
    transform: rotateY(0deg) translateZ(var(--deft));
}

.cube-box img:nth-child(2) {
    transform: rotateY(90deg) translateZ(var(--deft));
}

.cube-box img:nth-child(3) {
    transform: rotateY(180deg) translateZ(var(--deft));
}

.cube-box img:nth-child(4) {
    transform: rotateY(-90deg) translateZ(var(--deft));
}

.cube-box img:nth-child(5) {
    transform: rotateX(90deg) translateZ(var(--deft));
}

.cube-box img:nth-child(6) {
    transform: rotateX(-90deg) translateZ(var(--deft));
}

.cube-box {
    animation: loops 10s linear infinite;
}

.cube-box:hover {
    --deft: 200px;
    animation-play-state: paused;
}

@keyframes loops {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}