Card Flip 3D
Une carte de 200 × 140 px fait un demi-tour sur son axe vertical en 0,8 s, dépasse légèrement le demi-tour puis se pose : recto indigo-violet, verso magenta-rose, envers masqué. Le survol, la touche Tab ou un toucher la retournent ; aucun JavaScript, et plus aucune rotation (le verso apparaît en fondu) si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. 3D comprend 50 effets, dont 8 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0002-root (fond #0a0a0f, 300 px de haut au minimum) centre un cadre .flip3d-container de 200 × 140 px qui porte perspective: 1000px et tabindex="0". Dedans, .flip3d-card occupe tout le cadre avec transform-style: preserve-3d : ses deux faces restent dans le même espace 3D au lieu d'être aplaties sur elle. Les faces .flip3d-front (dégradé #6366f1 → #8b5cf6) et .flip3d-back (dégradé #d946ef → #f43f5e) sont superposées en position: absolute ; le verso est tourné d'avance de 180° (rotateY(180deg)) et chaque face a backface-visibility: hidden, ce qui la rend invisible quand elle tourne le dos à l'écran.
Au survol du cadre, ou quand il a le focus (:focus-within), la carte reçoit rotateY(180deg) : le recto part de dos et disparaît, le verso arrive de face. La transition dure 0,8 s sur la courbe cubic-bezier(.175, .885, .32, 1.275), dont la sortie dépasse 1 : la carte passe la tranche à 90° en 0,09 s (94 ms mesurés dans Chromium 151), monte jusqu'à environ 196° vers 0,5 s, puis revient se poser à 180°. C'est ce petit rebond qui donne le poids de la carte. Quand le pointeur sort ou que le focus part, la même courbe la ramène, avec le même dépassement de l'autre côté.
Pourquoi le survol est posé sur le cadre et pas sur la carte : un élément transformé est touché par la souris selon sa forme transformée. À 90°, la carte n'est plus qu'un trait ; si elle portait elle-même le :hover, le pointeur la quitterait en plein demi-tour et elle repartirait en arrière, en boucle. Le cadre, lui, ne bouge pas : sa zone de 200 × 140 px reste stable pendant tout le mouvement. C'est aussi lui qui porte la perspective, parce que perspective s'applique aux enfants de l'élément qui la déclare.
Accessibilité
- Clavier et toucher : le cadre a
tabindex="0"et chaque règle:hoverest doublée par:focus-within. Tab donne le focus à la carte et la retourne, un second Tab passe à l'élément suivant et la remet à l'endroit ; un anneau de 2 px#a5b4fc(:focus-visible) marque le focus au clavier seulement. Au doigt, le toucher donne le focus et retourne la carte, un toucher ailleurs la remet. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 (Tab et toucher émulé). Un clic à la souris donne aussi le focus : la carte reste retournée après le départ du pointeur, jusqu'au clic suivant ailleurs. - Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0002-rootretire la rotation (transform calculé :none) et pose le verso à plat sur le recto, invisible ; survol, focus ou toucher le font apparaître en fondu de 0,3 s. Le contenu des deux faces reste accessible sans aucun mouvement dans l'espace. - Lecteurs d'écran :
backface-visibilityne cache qu'à l'écran. Les deux faces sont dans le HTML et sont lues dans l'ordre, recto puis verso, que la carte soit retournée ou non. Si le verso est une réponse à deviner (quiz, mot à traduire), annoncez-le dans le texte du recto plutôt que de compter sur le retournement. - Contraste : le texte blanc de 18 px en gras mesure 4,47:1 à 4,23:1 sur le recto et 3,46:1 à 3,67:1 sur le verso. 18 px reste sous le seuil du « grand texte » (18,66 px en gras), qui demande 4,5:1 : foncez les dégradés (par exemple
#4f46e5, 6,29:1) ou montez le texte à 19 px si la carte porte une information.
Compatibilité navigateur
CSS seul (perspective, transform-style: preserve-3d, backface-visibility, :focus-within, :focus-visible), aucun JavaScript, aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : même retournement, même rebond, deux copies indépendantes sur une page, verso en fondu sans rotation sous mouvement réduit. Le WebKit de Playwright (26.5) aplatit toute 3D CSS, même un cube de référence : le focus et le toucher y sont mesurés, le rendu 3D n'a pas été vérifié sur un vrai Safari. backface-visibility sans préfixe existe dans Safari depuis la version 15.4.
Sans transformations 3D, la carte ne tourne pas et le verso reste caché derrière le recto. Dans Safari avant 15.4, ajoutez -webkit-backface-visibility: hidden aux deux faces, sinon le recto se voit en miroir à travers le verso. Sans :focus-visible (navigateur ancien), c'est le contour de focus par défaut qui s'affiche.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0002-root">
<div class="demo-3d">
<div class="flip3d-container" tabindex="0">
<div class="flip3d-card">
<div class="flip3d-face flip3d-front">… recto …</div>
<div class="flip3d-face flip3d-back">… verso …</div>
</div>
</div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille (CSS — width et height de .flip3d-container) |
200 × 140 px | La carte et ses faces suivent le cadre (100 %). Pour une grande carte, augmentez la perspective dans la même proportion : à 360 px de large, 1 000 px de perspective restent naturels, en dessous de 600 px le bord qui tourne vers vous grossit fortement. |
Perspective (CSS — perspective de .flip3d-container) |
1000px | Plus la valeur est petite, plus le relief est marqué pendant le demi-tour : 600px accentue, 2000px donne un retournement presque plat. |
Durée et rebond (CSS — transition de .flip3d-card) |
.8s cubic-bezier(.175, .885, .32, 1.275) | La seconde valeur au-dessus de 1 (1.275) fait le dépassement d'environ 16°. ease-in-out retire le rebond ; .5s donne un retournement plus sec. |
Axe (CSS — rotateY de la règle de survol et de .flip3d-back) |
rotateY(180deg) | Remplacez les deux par rotateX(180deg) pour une carte qui bascule de haut en bas. Changez toujours les deux ensemble, sinon le verso apparaît à l'envers. |
Délai au survol (CSS — transition-delay sur la règle :hover) |
aucun | .3s évite qu'une carte se retourne quand la souris ne fait que la traverser, utile dans une grille de cartes. À ne mettre que sur l'entrée : la sortie reste immédiate. |
Couleurs et anneau de focus (CSS — .flip3d-front, .flip3d-back, :focus-visible) |
#6366f1 → #8b5cf6, #d946ef → #f43f5e, anneau #a5b4fc | Les dégradés se changent librement. L'anneau clair est fait pour le fond sombre de la racine : sur une page blanche, prenez une couleur foncée (par exemple #4f46e5). |
FAQ
tabindex="0"), et :focus-within garde la carte retournée tant que le focus reste dedans : c'est ce qui la rend utilisable au clavier et au doigt. Elle revient dès qu'on clique ou touche ailleurs. Si vous ne voulez que le survol, retirez tabindex et les règles :focus-within ; la carte ne sera alors plus accessible au clavier.:hover et :focus-within par une classe, par exemple .flip3d-container.is-flipped .flip3d-card { transform: rotateY(180deg) }, faites du cadre un <button> et basculez la classe au clic avec une ligne de JavaScript (classList.toggle), en mettant à jour aria-pressed. Un <button> répond nativement à Entrée et Espace.
