modif js rouleau (ça tourne comme sur des rouleaux)

app.js

@@ -63,12 +63,27 @@ function regles(){
 }
 
 function rotate(rouleau, angle){
-    let i = 1;
+    let id = null;
-    let interval = setInterval(() => {
+    let i = 0;
-        if(i >= angle) {clearInterval(interval); rouleau.style.transform = "rotate3d(1, 0, 0, "+angle+"deg)"}
+    clearInterval(id);
-        rouleau.style.transform = "rotate3d(1, 0, 0, "+i+"deg)"
+    id = setInterval(frame, 10);
-        i += 5
+    function frame() {
-    }, 1)
+        if (i >= angle) {
+            clearInterval(id);
+        }
+        else {
+            i += 9;
+            rouleau.style.transform = 'rotate3d(1,0,0,'+i+'deg)';
+        }
+    }
+    // let i = 1;
+    // let interval = setInterval(() => {
+    //     if(i >= angle) {
+    //         clearInterval(interval); rouleau.style.transform = "rotate3d(1, 0, 0, "+angle+"deg)"
+    //     }
+    //     rouleau.style.transform = "rotate3d(1, 0, 0, "+i+"deg)"
+    //     i += 5
+    // }, 1)
 }
 
 function tirage(){

master.css

@@ -1,8 +1,7 @@
 .rouleau {
     width: 60px;
     height: 60px;
-    border: 1px solid #CCC;
+    margin: 80px 0;
-    margin: 80px;
     perspective: 400px;
 }
 
@@ -13,8 +12,8 @@
 }
 
 .cube {
-    width: 60px;
+    width: 50px;
-    height: 60px;
+    height: 50px;
     position: relative;
     transform-style: preserve-3d;
     /* transform: translateZ(-100px); */
@@ -23,48 +22,25 @@
 
 .cube__face {
     position: absolute;
-    width: 60px;
+    width: 50px;
-    height: 60px;
+    height: 50px;
     border: 2px solid black;
-    line-height: 60px;
+    line-height: 50px;
-    font-size: 40px;
+    font-size: 20px;
+    background-color: #e52800;
     box-sizing: border-box;
     font-weight: bold;
     color: white;
     text-align: center;
 }
 
-.cube {
+.cube__face--0  { transform: rotateX(  0deg) translateZ(76px); }
-    animation: tourner 1s ease-in-out;
+.cube__face--1  { transform: rotateX( 36deg) translateZ(76px); }
-}
+.cube__face--2  { transform: rotateX( 72deg) translateZ(76px); }
-
+.cube__face--3  { transform: rotateX(108deg) translateZ(76px); }
-@keyframes tourner {
+.cube__face--4  { transform: rotateX(144deg) translateZ(76px); }
-    0%{
+.cube__face--5  { transform: rotateX(180deg) translateZ(76px); }
-        transform: rotate3d(1, 0, 0, 0);
+.cube__face--6  { transform: rotateX(216deg) translateZ(76px); }
-    }
+.cube__face--7  { transform: rotateX(252deg) translateZ(76px); }
-    100%{
+.cube__face--8  { transform: rotateX(288deg) translateZ(76px); }
-        transform: rotate3d(1, 0, 0, 360deg);
+.cube__face--9  { transform: rotateX(324deg) translateZ(76px); }
-    }
-}
-
-.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(91px); }
-.cube__face--1  { transform: rotateX( 36deg) translateZ(91px); }
-.cube__face--2  { transform: rotateX( 72deg) translateZ(91px); }
-.cube__face--3  { transform: rotateX(108deg) translateZ(91px); }
-.cube__face--4  { transform: rotateX(144deg) translateZ(91px); }
-.cube__face--5  { transform: rotateX(180deg) translateZ(91px); }
-.cube__face--6  { transform: rotateX(216deg) translateZ(91px); }
-.cube__face--7  { transform: rotateX(252deg) translateZ(91px); }
-.cube__face--8  { transform: rotateX(288deg) translateZ(91px); }
-.cube__face--9  { transform: rotateX(324deg) translateZ(91px); }