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.

Le CSS

Concernant la cadre rien de bien compliqué, à part la propriété perpespective, qui permet d’indiquer la distance à laquelle se trouve la “caméra” pendant les effets 3D. Plus cette valeur est petite, plus les éléments occuperont de place à l’écran.

.card {
  width: 200px;
  height: 200px;
  perspective: 1000px;
  font-family: sans-serif;
}

Pour la planche, on utilise ces propriétés :

.card_inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: rotate .75s ease-in-out;
  transform-style: preserve-3d;
}

La position est relative pour permettre de placer les deux faces l’une sur l’autre.

La propriété transform-style est là pour indiquer de préserver la 3D lors des transitions.

Pour les deux faces:

.card_face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

backface-visibility permet de cacher le dos d’un élément si celui-ci ne nous fait plus face.

Pour le dos de la carte (ce qu’on voit si la souris ne survole pas notre carte), mon exemple utilise ce style (qui peut être complément différent chez vous) :

.card_back {
  background-image: url('https://picsum.photos/id/823/200');
  background-position: center;
  background-size: cover;
}

Et pour la face, j’utilise ça :

.card_front {
  background-color: rgb(35 15 12);
  color: lightgoldenrodyellow;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  rotate: y 180deg;
}

Le seul élément vraiment important pour l’effet recherché étant la propriété rotate.

De nombreux exemples de flip card sur le net utilisent la propriété transform, et la fonction rotateY(). Cette manière de faire fonctionne très bien, mais a l’”incovénient” d’être cumulative (par exemple, si vous appliquez une rotation suivie d’une translation sur l’axe X, cet axe X n’est plus à l’horizontale mais aura suivi la rotation), ce qui peut mener à un véritable casse-tête pour ordonner les différentes transformations pour parvenir au résultat escompté.

Toutes les différentes transformations sont maintenant appliquables avec leur propre propriété.

Et pour terminer :

.card:hover .card_inner {
  rotate: y 180deg;
}