Fabriquer un dé en CSS
⚀ ⚁ ⚂ ⚃ ⚄ ⚅ Les 6 faces du dé telles que nous les propose le système.Pour les utiliser dans une page il faut utiliser les caractères ⚀ pour ⚀, ⚁ pour ⚁, ⚂ pour ⚂, ⚃ pour ⚃, ⚄ pour ⚄ et ⚅ pour ⚅. J'ai préféré faire des gifs transparents plus faciles à manipuler. Je les ai colorés dans le code CSS (.face1, .face2 etc.). Vous pouvez les enregistrer dans le même dossier que votre page html si vous voulez reproduire l'animation plus bas.
Pour dessiner le dé, j'ai pris un dé du commerce comme modèle.
Vous pouvez remarquer, pour ceux qui l'ignoraient, que la disposition des faces n'est pas anodine. Deux faces opposées ont un total de 7 points. Le 6 est opposé au 1, le 5 est opposé au 2 et le 4 est opposé au 3. Ça nous fait un total de 21 points.
Pour les amateurs du jeu de Yam's, vous avez là l'explication du bonus que l'on obtient en faisant 63 ou plus au total des dés. Il suffit de faire 6 séries de trois dés identiques pour abtenir les 63 points.
Le code HTML est particulièrement simple. Il suffit d'empiler les faces les unes sur les autres. La face 5 étant en bas de la pile et la face 3 sur le dessus.
<div id="animDE">
<div class="face5" id="anim5"></div>
<div class="face2" id="anim2"></div>
<div class="face1" id="anim1"></div>
<div class="face4" id="anim4"></div>
<div class="face6" id="anim6"></div>
<div class="face3" id="anim3"></div>
</div>
Le code CSS peut paraitre un peu long mais ce ne sont pratiquement que des répétitions; Il y a six faces donc six animations.
Tout d'abord, il y a le descriptif des faces avec la mise en couleur.
Ensuite, vient le carré en pointillé dans lequel vient s'inscrire le dé. Il est suivi par le blocage des animations quand on passe la souris sur le carré Il faut épéter l'opration fois sinon ça ne fonctionnera pas correctement.
Plus bas, on a les positions de départ des animations avec la déclaration de l'animation. A noter que je les ai baptisées un, deux, trois..., c'est plus facile pour me repérer.
Pour terminer, on a les règles @keyframes qui décrivent l'évolution des faces pendant l'animation.
Pour comprendre tous les mots-clés utilisés, j'ai utilisé mon site (surtout la rubrique Réf. CSS). Si vous aimez ce genre d'anim, dans Trucs et astuces il y a quelques anims sympas, en particulier "Recto verso" qui permet de voir une carte à jouer sur ses deux faces (c'est sans doute ma préférée). Le site se trouve ici http:\\fnauche.free.fr\index.html.
/* Les faces de dé du système */
.de {
font-size: 100px;
}
/* les six faces du dé */
/* ******************* */
.face1 {
background: url("1.gif");
background-color: rgba(0, 0, 255, .44);
background-size: 100% 100%;
width: 120px;
height: 120px;
}
.face2 {
background: url("2.gif");
background-color: rgba(0, 255, 0, .4);
background-size: 100% 100%;
width: 120px;
height: 120px;
}
.face3 {
background: url("3.gif");
background-color: rgba(255, 0, 0, .4);
background-size: 100% 100%;
width: 120px;
height: 120px;
}
.face4 {
background: url("4.gif");
background-color: rgba(0, 255, 255, .4);
background-size: 100% 100%;
width: 120px;
height: 120px;
}
.face5 {
background: url("5.gif");
background-color: rgba(255, 0, 255, .4);
background-size: 100% 100%;
width: 120px;
height: 120px;
}
.face6 {
background: url("6.gif");
background-color: rgba(255, 255, 0, .4);
background-size: 100% 100%;
width: 120px;
height: 120px;
}
/* Le repère pointillé autour du dé reconstitué */
/* ******************************************** */
#animDE {
float: left;
position: relative;
width: 180px;
height:180px;
border: 1px dotted black;
margin-left: 240px;
}
/* On bloque chacune des 6 animations */
#animDE:hover #anim1 { animation-play-state: paused; }
#animDE:hover #anim2 { animation-play-state: paused; }
#animDE:hover #anim3 { animation-play-state: paused; }
#animDE:hover #anim4 { animation-play-state: paused; }
#animDE:hover #anim5 { animation-play-state: paused; }
#animDE:hover #anim6 { animation-play-state: paused; }
/* Positions des faces du dé au début de l'animation */
/* ************************************************* */
#anim1 {
position: absolute;
width: 120px;
top: -120px;
left: -120px;
animation: un 10s ease infinite alternate;
}
#anim2 {
position: absolute;
width: 120px;
top: -120px;
left: -120px;
animation: deux 10s ease infinite alternate;
}
#anim3 {
position: absolute;
width: 120px;
top: -120px;
left: -120px;
animation: trois 10s ease infinite alternate;
}
#anim4 {
position: absolute;
width: 120px;
top: -120px;
left: -120px;
animation: quatre 10s ease infinite alternate;
}
#anim5 {
position: absolute;
width: 120px;
top: -120px;
left: -120px;
animation: cinq 10s ease infinite alternate;
}
#anim6 {
position: absolute;
width: 120px;
top: -120px;
left: -120px;
animation: six 10s ease infinite alternate;
}
/* Scripts des animations */
/* ********************** */
@keyframes cinq {
0% {
top: -120px;
left: -120px;
transform: skewy(0deg);
position: relative;
}
10% {
top: -120px;
left: -120px;
transform: skewy(0deg);
position: relative;
}
40% { position: absolute;
top: 60px;
left: 120px;
transform-origin: left bottom;
transform: skewy(-45deg) rotate(-360deg);
width: 60px;
}
100% { position: absolute;
top: 60px;
left: 120px;
transform-origin: left bottom;
transform: skewy(-45deg) rotate(-360deg);
width: 60px;
}
}
@keyframes deux {
0% {
top: -120px;
left: -120px;
transform: skewy(0deg);
position: absolute;
}
20% {
top: -120px;
left: -120px;
transform: skewy(0deg);
position: absolute;
}
50% { position: absolute;
top: 30px;
left: 0px;
transform: skewy(-45deg) rotate(360deg);
width: 60px;
}
100% { position: absolute;
top: 30px;
left: 0px;
transform: skewy(-45deg) rotate(360deg);
width: 60px;
}
}
@keyframes un {
0% {
top: -120px;
left: -120px;
position: absolute;
}
30% {
top: -120px;
left: -120px;
position: absolute;
}
60% { position: absolute;
top: 0px;
left: 60px;
transform: rotatex(360deg) rotatey(-360deg);
width: 120px;
}
100% { position: absolute;
top: 0px;
left: 60px;
transform: rotatex(360deg) rotatey(-360deg);
width: 120px;
}
}
@keyframes quatre {
0% {
top: -120px;
left: -120px;
position: absolute;
}
40% {
top: -120px;
left: -120px;
position: absolute;
}
70% { position: absolute;
top: 120px;
left: 0px;
transform-origin: left bottom;
transform: skewx(-45deg) rotatex(-360deg) rotatey(360deg);
width: 120px;
height: 60px;
}
100% { position: absolute;
top: 120px;
left: 0px;
transform-origin: left bottom;
transform: skewx(-45deg) rotatex(-360deg) rotatey(360deg);
width: 120px;
height: 60px;
}
}
@keyframes six {
0% {
top: -120px;
left: -120px;
position: absolute;
}
50% {
top: -120px;
left: -120px;
position: absolute;
}
80% { position: absolute;
top: 60px;
left: 0px;
transform-origin: left bottom;
transform: skewx(-45deg);
width: 120px;
height: 60px;
}
100% { position: absolute;
top: 60px;
left: 0px;
transform: skewx(0deg);
width: 120px;
height: 120px;
}
}
@keyframes trois {
0% {
top: -120px;
left: -120px;
position: absolute;
}
60% {
top: -120px;
left: -120px;
position: absolute;
transform-origin: left bottom;
}
75% { position: absolute;
top: -120px;
left: 60px;
transform: skewx(-45deg);
width: 120px;
height: 60px;
}
90% { position: absolute;
top: 0px;
left: 30px;
transform: skewx(-45deg);
width: 120px;
height: 60px;
}
100% { position: absolute;
top: 0px;
left: 30px;
transform: skewx(-45deg);
width: 120px;
height: 60px;
}
}