body {
    background-color: black;

    perspective: 1000px;
    perspective-origin: 50% 100%;

    transform-style: preserve-3d;

    width: 100%;
    height: 100%;

    margin: 0; 
    
    overflow: hidden;

    background-image: url("348_andere-wereld.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


#world {
    width: 0px;
    height: 0px;

    background-color: aliceblue;

    position: absolute;

    transform: translateX(50vw) translateY(50vh) translateZ(0px) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    animation: spin 5s infinite linear;

}

.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(0deg) rotateY(360deg) rotateZ(0deg);
    }
}


.side {
    position: absolute;
    width: 200px;
    height: 200px;

    clip-path: polygon(50% 0, 100% 100%, 0 100%);

    background-color: rgba(110, 10, 10, 0.632);

    background-image: url("wanda.9cab6f88.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
}

.bottom {
    transform: translateX(-100px) translateY(-15px) rotateX(90deg);
    border: none;
    background-color: blue;
    clip-path: none;

    background-image: url("zampanio_landing_png.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.front {
    transform: translateZ(50px) translateX(-100px) translateY(-100px) rotateX(30deg);
}

.back {
   transform: translateZ(-50px) translateX(-100px) translateY(-100px) rotateX(-30deg);
}

.left {
    transform:  translateY(-100px) translateX(-150px) rotateY(90deg) rotateX(-30deg);
}

.right {
    transform:  translateY(-100px) translateX(-50px) rotateY(90deg) rotateX(30deg);
}

.top {
    transform: translateY(-200px) translateX(-100px) rotateX(90deg) ;
}