/* body {
    background-color: skyblue;
} */


.apericube {
    width: 40px;
    height: 40px;
    perspective: 100px;
}

.cube {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    position: relative;
     
    animation: tourne 15s infinite linear;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.top {
    
    transform:rotateX(90deg)translateZ(20px)
}

.bottom {
    
    transform:rotateX(-90deg)translateZ(20px)
}

.top {
    
    transform:rotateY(90deg)translateZ(20px)
}

.bottom {
    
    transform:rotateY(-90deg)translateZ(20px)
}

.right {
    
    transform:rotateX(90deg)translateZ(20px)
}

.left {
    
    transform:rotateX(-90deg)translateZ(20px)
}
.back {
    
    transform:rotateY(180deg)translateZ(20px)
}

.front {
    
    transform:rotateY(0)translateZ(20px)
}



/* .saveur {
    background-color: blue;
} */



@keyframes tourne {
    from{ transform: rotateX(0deg) rotateY(0deg)}
    to{ transform: rotateX(360deg) rotateY(360deg)}
    }
}