barraux.a
/
MSJSAboulinBarraux
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
BARRAUX Arthur 3 years ago
parent
295a2f1723
commit
85f7409ee3
2 changed files with 42 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      app.js
  2. 60
      master.css

33
app.js
View File

@ -42,8 +42,8 @@ function nbAlea(){
return multiples[Math.floor(Math.random()*9)]; return multiples[Math.floor(Math.random()*9)];
} }
function gain(tirage){ function gain(tirage){
if(tirage[0] == 9 && if(tirage[0] == 9 &&
tirage[1] == 9 && tirage[1] == 9 &&
tirage[2] == 9){ tirage[2] == 9){
return bac return bac
} }
@ -63,12 +63,27 @@ function regles(){
} }
function rotate(rouleau, angle){ 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(){ function tirage(){
@ -76,4 +91,4 @@ function tirage(){
rotate(document.getElementsByClassName("cube")[1], 4*360+nbAlea()) rotate(document.getElementsByClassName("cube")[1], 4*360+nbAlea())
rotate(document.getElementsByClassName("cube")[2], 4*360+nbAlea()) rotate(document.getElementsByClassName("cube")[2], 4*360+nbAlea())
} }
tirage() tirage()

60
master.css
View File

@ -1,8 +1,7 @@
.rouleau { .rouleau {
width: 60px; width: 60px;
height: 60px; height: 60px;
border: 1px solid #CCC; margin: 80px 0;
margin: 80px;
perspective: 400px; perspective: 400px;
} }
@ -13,8 +12,8 @@
} }
.cube { .cube {
width: 60px; width: 50px;
height: 60px; height: 50px;
position: relative; position: relative;
transform-style: preserve-3d; transform-style: preserve-3d;
/* transform: translateZ(-100px); */ /* transform: translateZ(-100px); */
@ -23,48 +22,25 @@
.cube__face { .cube__face {
position: absolute; position: absolute;
width: 60px; width: 50px;
height: 60px; height: 50px;
border: 2px solid black; border: 2px solid black;
line-height: 60px; line-height: 50px;
font-size: 40px; font-size: 20px;
background-color: #e52800;
box-sizing: border-box; box-sizing: border-box;
font-weight: bold; font-weight: bold;
color: white; color: white;
text-align: center; 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); }

Write Preview
Loading…
Cancel
Save