N° 042 · ●●○

Flip card

A card that flips in 3D on click or with the keyboard, without a single line of JavaScript. The right exercise to understand perspective and the hidden side of elements in CSS.

CSS

What you'll learn

Create a 3D scene with perspective
Hide the back of a face with backface-visibility
Keep a state in CSS with a checkbox

Why this language

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.

How it works

/* 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; }
}

Pitfalls

PIÈGE 1 : Oublier preserve-3d

Pitfall

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

Pitfall

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

Pitfall

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={...} />.

Comments

Loading comments…