diff --git a/index.html b/index.html
index e4f99f1..bec2a3f 100644
--- 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>
diff --git a/master.css b/master.css
new file mode 100644
index 0000000..21f78b2
--- /dev/null
+++ 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); }
