From eb3376bc77dece442406fe905dd2b821e5f810f2 Mon Sep 17 00:00:00 2001 From: "barraux.a" Date: Mon, 28 Mar 2022 17:43:05 +0200 Subject: [PATCH] 2-3 modifs --- app.js | 33 +-------------------------------- master.css | 33 ++++++++++++--------------------- 2 files changed, 13 insertions(+), 53 deletions(-) diff --git a/app.js b/app.js index 8cd7df4..fad4890 100644 --- a/app.js +++ b/app.js @@ -1,10 +1,4 @@ - -function vw(v) { - var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); - return (v * w) / 100; -} - -for (let i = 0; i < 0; i++) { +for (let i = 0; i < 10; 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) - } -} diff --git a/master.css b/master.css index 6ec4b5c..0cf9c43 100644 --- a/master.css +++ b/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); } -.cube__face--1 { transform: rotateX( 36deg) translateZ(74px); } -.cube__face--2 { transform: rotateX( 72deg) translateZ(74px); } -.cube__face--3 { transform: rotateX(108deg) translateZ(74px); } -.cube__face--4 { transform: rotateX(144deg) translateZ(74px); } -.cube__face--5 { transform: rotateX(180deg) translateZ(74px); } -.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); } */ +#tirage { + display: flex; + justify-content: space-around; + margin: auto; + position: relative; + width: 42.4%; +}