2-3 modifs

app.js

@@ -1,10 +1,4 @@
-
+for (let i = 0; i < 10; i++) {
-function vw(v) {
-  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
-  return (v * w) / 100;
-}
-
-for (let i = 0; i < 0; i++) {
     console.log(i);
     for (var j = 0; j < 3; j++) {
         console.log(j);
@@ -13,9 +7,6 @@ for (let i = 0; i < 0; i++) {
 
 }
 
-
-
-
 let bac = 1000
 let joueur = 100
 let mise
@@ -89,14 +80,6 @@ function rotate(rouleau, angle){
             rouleau.style.transform = 'rotate3d(1,0,0,'+i+'deg)';
         }
     }, 5);
-    // 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(){
@@ -105,17 +88,3 @@ 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)
-    }
-}

master.css

@@ -1,3 +1,7 @@
+body{
+    background-color: #001a35;
+}
+
 .rouleau {
     width: 4.1vw;
     height: 3.4vw;
@@ -5,21 +9,11 @@
     top: 16.8vw;
 }
 
-#tirage {
-    display: flex;
-    justify-content: space-around;
-    margin: auto;
-    position: relative;
-    width: 42.4%;
-}
-
 .cube {
     width: 4.1vw;
     height: 3.4vw;
     position: relative;
     transform-style: preserve-3d;
-    /* transform: translateZ(-100px); */
-    /*transition: transform 1s;*/
 }
 
 .cube__face {
@@ -28,7 +22,7 @@
     height: 3.4vw;
     border: 2px solid black;
     line-height: 3.4vw;
-    font-size: 20px;
+    font-size: 1.5vw;
     background-color: #e52800;
     box-sizing: border-box;
     font-weight: bold;
@@ -48,13 +42,10 @@
     left: 51.5%;
 }
 
-/* .cube__face--0  { transform: rotateX(  0deg) translateZ(74px); }
+#tirage {
-.cube__face--1  { transform: rotateX( 36deg) translateZ(74px); }
+    display: flex;
-.cube__face--2  { transform: rotateX( 72deg) translateZ(74px); }
+    justify-content: space-around;
-.cube__face--3  { transform: rotateX(108deg) translateZ(74px); }
+    margin: auto;
-.cube__face--4  { transform: rotateX(144deg) translateZ(74px); }
+    position: relative;
-.cube__face--5  { transform: rotateX(180deg) translateZ(74px); }
+    width: 42.4%;
-.cube__face--6  { transform: rotateX(216deg) translateZ(74px); }
+}
-.cube__face--7  { transform: rotateX(252deg) translateZ(74px); }
-.cube__face--8  { transform: rotateX(288deg) translateZ(74px); }
-.cube__face--9  { transform: rotateX(324deg) translateZ(74px); } */