rouleau en 4d

3 years ago · 5eed3c989b
2 changed files with 71 additions and 1 deletions
--- a/index.html
+++ b/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>
--- a/master.css
+++ b/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); }