Flip Transition
Carte à deux faces : l'intérieur tourne de 180° autour de l'axe vertical en 0,8 s, en vraie 3D (preserve-3d, perspective de 800 px), et le verso apparaît au même endroit, à la même taille que le recto. CSS + 0,9 Ko de JavaScript, clic, Entrée ou Espace, face d'arrivée directe 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. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La carte .flpt-card (200 × 200 px) porte la perspective (perspective: 800px) : c'est elle qui décide de la profondeur vue par l'œil. Dedans, .flpt-inner garde ses enfants dans l'espace 3D (transform-style: preserve-3d) et porte la transition transform .8s cubic-bezier(.4, 0, .2, 1). Les deux faces .flpt-face sont superposées en inset: 0 avec backface-visibility: hidden (et sa forme -webkit-) : une face tournée dos à l'écran n'est pas dessinée. Le verso .flpt-back part déjà retourné (rotateY(180deg)) : au repos, on voit le recto.
Au basculement de .active, .flpt-inner tourne à rotateY(180deg) : le recto passe de dos et disparaît, le verso se retrouve face à l'écran. Mesuré dans Chromium 151 : 250 ms après le clic, la carte ne fait plus que 79 px de large à l'écran (95 px dans Firefox 153), presque de profil ; à 1,1 s elle a fait son demi-tour. Contrôle par capture d'écran au centre de la carte, dans Chromium, Firefox et WebKit 26.5 : couleur du recto au repos, couleur du verso après le clic, de nouveau le recto après le second clic — la face cachée n'apparaît jamais en miroir. L'état B tient tant qu'on ne rappuie pas ; le second appui retourne la carte dans l'autre sens.
Le script pose ou retire .active au clic, à Entrée ou à Espace sur chaque .flpt-card de la page, tient aria-pressed à jour et passe aria-hidden à la face tournée vers l'arrière. Les faces portent aussi une bascule de visibility retardée de 0,27 s, l'instant mesuré où la carte passe de profil (90°) : chaque face n'est dessinée que pendant sa moitié du demi-tour. C'est une ceinture de sécurité pour les moteurs qui n'appliquent pas backface-visibility à l'intérieur d'un preserve-3d — c'est le cas du WebKit de test de Playwright, qui sans elle montre le verso en miroir au repos. Tout est préfixé flpt-, rien n'est exposé sur window. La perspective est sur la carte et non sur la page : chaque carte garde son propre point de fuite, au centre d'elle-même, même alignée avec d'autres. Une variante qui retourne plusieurs cartes en cascade existe aussi dans la catégorie.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la rotation est retirée et la face d'arrivée s'affiche aussitôt (mesuré à 60 ms dans Chromium et Firefox : rotation déjà à 180°). Une rotation 3D est un mouvement ample, souvent mal supporté par les personnes sujettes au vertige. - Clavier et lecteurs d'écran : la carte porte
role="button",tabindex="0"etaria-pressed; Entrée et Espace la retournent comme un clic (mesuré). La face arrière reçoitaria-hidden="true": le lecteur d'écran lit la face visible seulement. Contour de 2 px au focus clavier. - Indiquer qu'il y a un verso : rien ne dit qu'une carte se retourne. Gardez une mention (« Voir le verso », une icône de retournement) ou des boutons Recto / Verso à côté.
- Ne pas mettre de lien dans la face cachée sans le retirer du parcours clavier : ajoutez
inertà la face arrière tant qu'elle est de dos, sinon Tab peut s'y arrêter sur un élément invisible.
Compatibilité navigateur
CSS 3D (perspective, transform-style: preserve-3d, backface-visibility avec préfixe -webkit-, rotateY) + 0,9 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : rotation, bonne face vérifiée par capture d'écran au repos, après le clic et après le retour, état B tenu ; clavier et mouvement réduit mesurés dans Chromium et Firefox. Le WebKit de test n'applique pas backface-visibility sous preserve-3d : c'est la bascule de visibility du code qui y garde le recto propre. Safari réel n'a pas été mesuré ; vérifiez sur un iPhone avant une mise en ligne qui compte.
Sans JavaScript, le recto reste affiché. Sans prise en charge de la 3D, la carte bascule d'une face à l'autre sans rotation visible, grâce à la bascule de visibility. Sans inset, écrivez top: 0; right: 0; bottom: 0; left: 0 sur .flpt-face.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="flpt-stage">
<div class="flpt-card" role="button" tabindex="0" aria-pressed="false">
<div class="flpt-inner">
<div class="flpt-face flpt-front">…</div>
<div class="flpt-face flpt-back" aria-hidden="true">…</div>
</div>
</div>
<span class="flpt-hint">…</span>
</div>Le code complet HTML + CSS + JS de Flip Transition, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Perspective (CSS — perspective de .flpt-card) |
800 px | Plus la valeur est petite, plus la carte semble venir vers vous en tournant : 500 px donne un effet marqué, 1 200 px une rotation presque plate. Prenez environ 3 à 4 fois la largeur de la carte. |
Axe (CSS — rotateY) |
axe vertical | rotateX(180deg) sur .flpt-inner et sur .flpt-back pour retourner la carte de haut en bas, comme un calendrier de bureau. |
Durée et courbe (CSS — transition de .flpt-inner) |
0,8 s, cubic-bezier(.4, 0, .2, 1) |
0,6 s pour un geste vif ; cubic-bezier(.3, 1.4, .5, 1) ajoute un léger dépassement à l'arrivée. Changez aussi le délai de visibility (0,27 s, règle .flpt-front, .flpt-back), calé sur l'instant où la carte passe de profil : 0,2 s pour 0,6 s, 0,1 s avec la courbe à rebond ; sinon une face apparaît de dos pendant 50 à 150 ms. |
Taille de la carte (CSS — .flpt-card) |
200 × 200 px | Donnez-lui les proportions de l'objet réel : 340 × 214 px pour une carte bancaire ou de visite. Les deux faces suivent, elles sont en inset: 0. |
Faces (CSS — .flpt-front, .flpt-back) |
dégradé indigo et dégradé brique | Gardez des fonds opaques sur les deux faces ; un fond transparent laisserait voir l'autre face pendant la rotation. |
FAQ
perspective sur le parent fixe un point de vue commun à tout ce qu'il contient : la carte tourne devant un œil immobile, et ses deux faces, dans le même espace 3D grâce à preserve-3d, se déforment ensemble. Mettre perspective() dans le transform de l'élément qui tourne marche aussi pour un seul élément, mais change le point de vue à chaque image de l'animation..flpt-card:hover .flpt-inner { transform: rotateY(180deg) }, .flpt-card:hover .flpt-front { visibility: hidden } et .flpt-card:hover .flpt-back { visibility: visible }. Les deux dernières reprennent pour le survol la bascule de visibility que le code applique à .active : sans elles, la carte paraît vide dans Chromium et montre son recto en miroir dans Firefox et WebKit (avec elles, verso correct dans les trois, mesuré). Mais au doigt, le survol n'existe pas et un appui laisse souvent la carte bloquée de dos ; gardez le clic (ou les deux) dès que le verso contient une information utile.
