N° 042 · ●●○

Carte recto verso

Une carte qui se retourne en 3D au clic ou au clavier, sans une seule ligne de JavaScript. Le bon exercice pour comprendre la perspective et la face cachée des éléments en CSS.

CSS

Ce qu'on apprend

Créer une scène 3D avec perspective
Cacher le dos d'une face avec backface-visibility
Garder un état en CSS avec une case à cocher

Pourquoi ce langage

Pourquoi une carte recto verso ? Les cartes à collectionner, les fiches de révision, les profils d'équipe : retourner une carte pour voir son dos est un geste que tout le monde comprend.

Le secret tient en trois propriétés. perspective sur le parent donne de la profondeur. transform-style: preserve-3d garde les deux faces dans le même espace. backface-visibility: hidden cache chaque face quand elle tourne le dos. Le verso est pré-tourné de 180 degrés : quand la carte tourne, il arrive à l'endroit.

Et l'état ? Une case à cocher cachée, reliée à la carte par un label. Cochée, la carte est retournée. Le clavier marche tout seul : Tab puis Espace.

Pourquoi en CSS seulement ? Pour montrer que le navigateur sait déjà tout faire. Le JavaScript de la démo ne sert qu'à ajuster la hauteur du cadre.

Comment ça marche

/* 1. LE HTML */
/* La case cachée garde l'état, le label la coche quand on clique sur la carte. */
<input type="checkbox" id="retourner" class="visuellement-cache" aria-label="Retourner la carte">
<div class="scene">
  <label class="carte" for="retourner">
    <span class="face recto">Recto</span>
    <span class="face verso">Verso</span>
  </label>
</div>

/* 2. LA SCÈNE */
/* perspective donne la profondeur : plus la valeur est petite, plus l'effet est fort. */
.scene { perspective: 1100px; }
.carte {
  display: block; position: relative;
  aspect-ratio: 63 / 88;                  /* le format d'une carte à jouer */
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3, 1.4, .4, 1);
}

/* 3. LES DEUX FACES */
/* Empilées au même endroit, chacune cachée quand elle tourne le dos. */
.face { position: absolute; inset: 0; backface-visibility: hidden; }
.verso { transform: rotateY(180deg); }

/* 4. RETOURNER */
/* La case cochée fait tourner la carte entière. */
#retourner:checked + .scene .carte { transform: rotateY(180deg); }

/* 5. LE CLAVIER ET LES PRÉFÉRENCES */
/* Le focus de la case se voit sur la carte, et le mouvement s'adoucit si on le demande. */
#retourner:focus-visible + .scene .carte { outline: 2px solid #c8f060; outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) {
  .carte { transition: none; }
}

Pièges

PIÈGE 1 : Oublier preserve-3d

Piège

Mauvais : mettre la rotation sur la carte sans transform-style: preserve-3d. Les deux faces s'aplatissent et on voit le recto à l'envers.

Fix

Correct : preserve-3d sur l'élément qui tourne, et backface-visibility: hidden sur chaque face.

PIÈGE 2 : Cacher la case avec display: none

Piège

Mauvais : display: none sur la case à cocher. Le clic marche encore, mais le clavier et les lecteurs d'écran ne la trouvent plus.

Fix

Correct : la rendre invisible visuellement, avec opacity: 0 et une position absolue, mais toujours focusable.

PIÈGE 3 : Safari et le dos visible

Piège

Mauvais : écrire seulement backface-visibility. Sur les vieux Safari, le verso traverse le recto pendant la rotation.

Fix

Correct : ajouter -webkit-backface-visibility: hidden.

PERSONNALISER

Retourner au survol avec :hover sur ordinateur, et garder le clic pour le tactile.
Un reflet qui suit le pointeur, comme la carte à reflet de ce même Widgetdex.
Retourner sur l'axe horizontal avec rotateX pour une carte de vœux.

OPTIMISATION

N'animez que transform : le navigateur délègue le calcul à la carte graphique, l'animation reste fluide.
Évitez de mettre will-change sur des dizaines de cartes à la fois : chacune consomme de la mémoire.

VERS REACT

L'état peut rester en CSS avec la case à cocher, ou passer dans un useState qui ajoute une classe.

Avec un useState, utilisez un vrai bouton avec aria-pressed plutôt qu'un div cliquable.

Les deux faces deviennent des enfants : <Carte recto={...} verso={...} />.

Commentaires

Chargement des commentaires…