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

rouleau en 4d

master
BARRAUX Arthur 3 years ago
parent
8737a4d062
commit
5eed3c989b
2 changed files with 71 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      index.html
  2. 54
      master.css

18
index.html
View File

@ -2,11 +2,27 @@
<html lang="fr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="master.css">
<title>Document</title>
</head>
<body>
<div id="tirage">
<span id="rouleau_1">0</span>
<span id="rouleau_1" class="rouleau">
<div class="cube">
<div class="cube__face cube__face--0">0</div>
<div class="cube__face cube__face--1">1</div>
<div class="cube__face cube__face--2">2</div>
<div class="cube__face cube__face--3">3</div>
<div class="cube__face cube__face--4">4</div>
<div class="cube__face cube__face--5">5</div>
<div class="cube__face cube__face--6">6</div>
<div class="cube__face cube__face--7">7</div>
<div class="cube__face cube__face--8">8</div>
<div class="cube__face cube__face--9">9</div>
</div>
</span>
<span id="rouleau_2">0</span>
<span id="rouleau_3">0</span>
</div>

54
master.css
View File

@ -0,0 +1,54 @@
.rouleau {
width: 60px;
height: 60px;
border: 1px solid #CCC;
margin: 80px;
}
.cube {
width: 60px;
height: 60px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}
.cube__face {
position: absolute;
width: 60px;
height: 60px;
border: 2px solid black;
line-height: 60px;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}
.cube {
transform: rotate3d(1, 0, 0, 90deg);
transition: 4s;
}
.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(92px); }
.cube__face--1 { transform: rotateX( 36deg) translateZ(92px); }
.cube__face--2 { transform: rotateX( 72deg) translateZ(92px); }
.cube__face--3 { transform: rotateX(108deg) translateZ(92px); }
.cube__face--4 { transform: rotateX(144deg) translateZ(92px); }
.cube__face--5 { transform: rotateX(180deg) translateZ(92px); }
.cube__face--6 { transform: rotateX(216deg) translateZ(92px); }
.cube__face--7 { transform: rotateX(252deg) translateZ(92px); }
.cube__face--8 { transform: rotateX(288deg) translateZ(92px); }
.cube__face--9 { transform: rotateX(324deg) translateZ(92px); }
Write Preview
Loading…
Cancel
Save