Vous avez toujours voulu savoir comment créer un effet de carte retournée (flip card en anglais) ? Cet article est ce qu’il vous faut !

Le résultat final est disponible ici.

Structure HTML

Pour commencer, attaquons nous à la structure HTML d’une carte.

Pour schématiser, une carte se décompose comme ceci : un cadre, qui contient une planche sur les faces de laquelle il y a ce que l’on veut afficher, et au survol de la souris, on fait pivoter cette planche interne.

Cela nous donne la structure HTML suivante :

<div class="card">
  <div class="card_inner">
    <div class="card_face card_back"></div>
    <div class="card_face card_front"><h2>Don't worry</h2><p>Be happy</p></div>
  </div>
</div>

La classe .card, représente le cadre, la classe .card_inner la planche et la classe .card_face les deux faces de cette planche (avec également une classe différente pour chaque face.