body {
    background-color: black;

    perspective: 500px;
    perspective-origin: 50% 50%;

    transform-style: preserve-3d;

    width: 100%;
    height: 100%;

    margin: 0; 
    
    overflow: hidden;
}


#world {
    width: 10px;
    height: 10px;

    background-color: aliceblue;

    position: absolute;

    transform: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;

    animation: spin 5s linear 0s infinite;

}

.cube {
    width: 0px;
    height: 0px;
    position: absolute;
    transform-style: preserve-3d;

}

@keyframes  spin {
    0% {
         transform: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
         transform: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}


.side {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: blue;
    border: 1px solid white;
    opacity: 50%;
}

.bottom {
    transform: rotateX(90deg) translateX(-100px);
}

.front {
    transform: translateZ(100px) translateX(-100px) translateY(-100px);
}

.back {
   transform: translateZ(-100px) translateX(-100px) translateY(-100px);
}

.left {
    transform:  rotateY(90deg) translateY(-100px);
}

.right {
    transform:  rotateY(90deg) translateY(-100px) translateZ(-200px);
}

.top {
    transform: rotateX(90deg) translateZ(200px) translateX(-100px) ;
}