html,
body {
    height: 100%;
}

body {
    background: radial-gradient(#fff, #ccc);
    overflow: hidden;
    perspective: 5000;
}

.cube {
    animation: rotate 10s ease-in-out infinite;
    bottom: 0;
    height: 500px;
    left: 0;
    margin: auto;
    position: absolute;
    transform-style: preserve-3d;
    right: 0;
    top: 0;
    width: 500px;
}

@keyframes rotate {
    0% {
        transform: scale (1) translate(0px) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
    }

    100% {
        transform: scale(0.15) translate(200px) rotateY(360deg) rotateX(720deg) rotateZ(1080deg);
    }
}

.face {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.front {
     background-image:url("https://cdn.wallpapersafari.com/15/96/i7eGaz.jpg");
     background-size: cover;
    transform: translateZ(250px);
}

.back {
     background-image:url("https://images.unsplash.com/photo-1512632578888-169bbbc64f33?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bW9zcXVlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
     background-size: cover;
    transform: translateZ(-250px);
}

.left {
    background-image:url("https://images.unsplash.com/photo-1572358899655-f63ece97bfa5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8bW9zcXVlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
    background-size: cover;
    transform: translateX(-250px) rotateY(90deg);
}

.right {
     background-image:url("https://images.unsplash.com/photo-1584551246679-0daf3d275d0f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fG1vc3F1ZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60");
     background-size: cover;
    transform: translateX(250px) rotateY(90deg);
}

.top {
     background-image:url("https://images.unsplash.com/photo-1544400554-36b2bfb55784?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MTR8OTc1MjA3OXx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
     background-size: cover;
    transform: translateY(-250px) rotateX(90deg);
}

.bottom {
    background-image:url("https://images.unsplash.com/photo-1592326871020-04f58c1a52f3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8Mnw5NzUyMDc5fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
    background-size: cover;
    transform: translateY(250px) rotateX(90deg);
}