merge js

app.js

@@ -81,19 +81,14 @@ function regles(){
 }
 
 function rotate(rouleau, angle){
-    let id = null;
     let i = 0;
-    clearInterval(id);
-    id = setInterval(frame, 5);
-    function frame() {
-        if (i >= angle) {
-            clearInterval(id);
-        }
+    let id = setInterval(() => {
+        if (i >= angle) clearInterval(id);
         else {
             i += 9;
             rouleau.style.transform = 'rotate3d(1,0,0,'+i+'deg)';
         }
-    }
+    }, 5);
     // let i = 1;
     // let interval = setInterval(() => {
     //     if(i >= angle) {
@@ -110,3 +105,17 @@ function tirage(){
     rotate(document.getElementsByClassName("cube")[2], Math.floor(Math.random() * 15)*360+nbAlea())
 }
 tirage()
+
+function vw(v) {
+    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+    return (v * w) / 100;
+}
+
+window.onresize = () => {
+    let cubes = document.getElementsByClassName('cube__face')
+    for (var i = 0; i < 10; i++) {
+        /*window.getComputedStyle(cubes[i])*/cubes[i].style.transform =
+            'rotateX('+i*36+'deg) translateZ('+vw(3.4)*Math.tan(18 * Math.PI / 180)+')';
+        console.log(window.getComputedStyle(cubes[i]).transform)
+    }
+}

index.html

@@ -61,5 +61,11 @@
     <input type="text" id="mise_input">
     <button id="lancer" onclick="jeu()">Lancer</button>
     <script src="app.js"></script>
+
+    <div class="regles">
+        <div class="regles-container">
+            Règles
+        </div>
+    </div>
 </body>
 </html>

master.css

@@ -19,7 +19,7 @@
     position: relative;
     transform-style: preserve-3d;
     /* transform: translateZ(-100px); */
-    transition: transform 1s;
+    /*transition: transform 1s;*/
 }
 
 .cube__face {