Termes CSS clés employés : transform:translate(), transform:rotate(), :active.
Compatibilité navigateurs : IE10+, Firefox16+. Chrome et Safari avec le préfixe -webkit-.
Le principe du Memory, soit le retournement d’une carte pour en voir l’autre face, est bien connu. Il est facile d’obtenir cet effet, nommé flip en anglais, à l’aide de CSS3.
La structure HTML est un élément conteneur DIV, renfermant un élément DIV identifié et renfermant le contenu composé de deux éléments DIV.
<IV class="conteneur">
<DIV id="flip">
<DIV id="faceA">
<IMG src="carte_dos.gif">
</DIV>
<DIV id="faceB">
<IMG src="carte_face.gif">
</DIV>
</DIV>
</DIV>
Comme d’habitude, le code CSS commence par définir un élément conteneur, puis l’élément DIV flip pour garantir que ses enfants partageront son contexte 3D :
.conteneur {
width:85px;
height:120px;
position: relative;
margin: 10px auto 10px;
}
#flip{
width:100%;
height:100%;
position:absolute;
transform-style: preserve-3d;
}
Les deux faces sont ensuite définies, en appliquant un retournement de 180° à la face B :
#faceA, #faceB{
display:block;
width:100%;
height:100%;
position:absolute;
backface-visibility: hidden;
}
#faceB{transform:rotateY(180deg);}
Enfin, pour obtenir l’effet de retournement en cas de clic sur la carte, il est ici employé le pseudo-élément :active :
#flip:active {transform:rotateY(180deg);}
|
---|