|
|
|
@ -8,6 +8,8 @@ |
|
|
|
|
|
|
|
#tirage { |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
margin: 0 20%; |
|
|
|
} |
|
|
|
|
|
|
|
.cube { |
|
|
|
@ -26,6 +28,7 @@ |
|
|
|
border: 2px solid black; |
|
|
|
line-height: 60px; |
|
|
|
font-size: 40px; |
|
|
|
box-sizing: border-box; |
|
|
|
font-weight: bold; |
|
|
|
color: white; |
|
|
|
text-align: center; |
|
|
|
@ -55,13 +58,13 @@ |
|
|
|
.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); } |
|
|
|
.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); } |
|
|
|
|
