Browse Source

rouleau en 4d

master
BARRAUX Arthur 3 years ago
parent
commit
5eed3c989b
  1. 18
      index.html
  2. 54
      master.css

18
index.html

@ -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

@ -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); }
Loading…
Cancel
Save