#scena {
    position: relative;
    perspective: 1000px;

    width: 200px;
    height: 200px;
    /* border: 3px dashed rgba(0, 0, 0, 0.308); */

    margin: 100px 60px;
}

#kostka {
    position: absolute;
    transform-style: preserve-3d;

    width: 100%;
    height: 100%;


    animation: rota 60s linear infinite forwards;

    
}

.sciana {
    position: absolute;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 4em;
    font-weight: bold;

    border: 2px solid black;
    border-radius: 5px;

    /* opacity: 0.7; */

    backface-visibility: hidden;
}

div.front {
    background-color: rgb(111, 170, 111);
    transform: translateZ(100px);
}

div.back {
    background-color: rgb(87, 87, 199);
    transform: rotateY(180deg) translateZ(100px);
}

div.left {
    background-color: rgb(192, 125, 0);
    transform: rotateY(-90deg) translatez(100px);
}
 
div.right {
    background-color: rgb(180, 81, 81);
    transform: rotateY(90deg) translatez(100px);
}
 
div.top {
    background-color: rgb(218, 218, 61);
    transform: rotatex(90deg) translatez(100px)
}
 
div.bottom {
    background-color: white;
    transform: rotatex(-90deg) translatez(100px)
}
 

@keyframes rota {
    from {

    }

    to {
        transform: rotatey(3240deg) rotatex(-360deg) rotatez(360deg);
    }
}