.rouleau {
    width: 60px;
    height: 60px;
    border: 1px solid #CCC;
    margin: 80px;
}

.cube {
    width: 60px;
    height: 60px;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-100px);
    transition: transform 1s;
}

.cube__face {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid black;
    line-height: 60px;
    font-size: 40px;
    font-weight: bold;
    color: white;
    text-align: center;
}

.cube {
    animation: tourner 1s ease-in-out;
}

@keyframes tourner {
    0%{
        transform: rotate3d(1, 0, 0, 0);
    }
    100%{
        transform: rotate3d(1, 0, 0, 360deg);
    }
}

.cube__face--0  { background: hsla(  0, 100%, 50%, 1); }
.cube__face--1  { background: hsla( 36, 100%, 50%, 1); }
.cube__face--2  { background: hsla( 72, 100%, 50%, 1); }
.cube__face--3  { background: hsla(108, 100%, 50%, 1); }
.cube__face--4  { background: hsla(144, 100%, 50%, 1); }
.cube__face--5  { background: hsla(180, 100%, 50%, 1); }
.cube__face--6  { background: hsla(216, 100%, 50%, 1); }
.cube__face--7  { background: hsla(252, 100%, 50%, 1); }
.cube__face--8  { background: hsla(288, 100%, 50%, 1); }
.cube__face--9  { background: hsla(324, 100%, 50%, 1); }

.cube__face--0  { transform: rotateX(  0deg) translateZ(92px); }
.cube__face--1  { transform: rotateX( 36deg) translateZ(92px); }
.cube__face--2  { transform: rotateX( 72deg) translateZ(92px); }
.cube__face--3  { transform: rotateX(108deg) translateZ(92px); }
.cube__face--4  { transform: rotateX(144deg) translateZ(92px); }
.cube__face--5  { transform: rotateX(180deg) translateZ(92px); }
.cube__face--6  { transform: rotateX(216deg) translateZ(92px); }
.cube__face--7  { transform: rotateX(252deg) translateZ(92px); }
.cube__face--8  { transform: rotateX(288deg) translateZ(92px); }
.cube__face--9  { transform: rotateX(324deg) translateZ(92px); }