Chapitre 5
Manipulation d'images

Retour Accueil CSS

38 Retournement dynamique.

Termes CSS clés employés : transform:translate(), transform:rotate(), :active.
Compatibilité navigateurs : IE10+, Firefox16+. Chrome et Safari avec le préfixe -webkit-.

Problématique

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.

Résolution pratique

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);}

Retournement




Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque
Get Firefox!