Flip Card Entry
Une carte à une seule face qui entre en pivotant de −90° (vue de profil) à 0° en 0,6 s avec un léger rebond, et sort en continuant sa rotation jusqu'à +90° : toujours dans le même sens, comme une carte qu'on donne puis qu'on retire. Perspective de 800 px, entrée automatique 600 ms après le chargement, 1,3 Ko de JavaScript, fondu de 0,15 s sous mouvement réduit.
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 .flip-entry-card (160 × 100 px, dégradé ambre #f59e0b → #d97706, coins de 14 px) vit dans un cadre .flip-entry-wrapper qui porte perspective: 800px. Au repos, elle vaut rotateY(-90deg) et opacity: 0 : de profil, sans épaisseur, donc invisible, avec backface-visibility: hidden. Ce n'est pas un recto-verso : il n'y a qu'une face, qui arrive et repart.
L'entrée (.flip-visible) la ramène à 0° en 0,6 s sur cubic-bezier(.34, 1.56, .64, 1) — elle dépasse un peu avant de se poser — et l'opacité monte en 0,3 s. La sortie (.flip-exit) la fait continuer jusqu'à +90° en 0,4 s, l'opacité partant 0,1 s plus tard. Pour qu'une nouvelle entrée reparte bien de −90° et non de +90°, le script pose une classe .flip-reset (transition: none), retire l'état de sortie, force un calcul (offsetWidth) puis lance l'entrée. Mesuré 120 ms après un deuxième clic d'entrée : −25° dans Chromium 151, −26° dans Firefox 153, −32° dans WebKit 26.5 — la carte arrive du même côté qu'au premier passage.
Le script (1,3 Ko) relie chaque bouton .flip-entry-btn à sa carte par aria-controls (plusieurs cartes par page) et fait entrer la carte 600 ms après le chargement, sauf si l'utilisateur a déjà cliqué. Tant qu'elle est cachée, la carte porte pointer-events: none et inert. Le premier évite un piège mesuré : une carte de profil (±90°) en perspective intercepte, dans Chromium et WebKit, les clics visés sur le bouton placé sous elle ; sans cette règle (et sans inert, qui la double), le bouton ne répondrait plus après la première sortie. Le second retire le contenu caché de la tabulation et des lecteurs d'écran.
Accessibilité
- Carte cachée vraiment absente : l'opacité à 0 ne suffit pas à cacher un contenu aux lecteurs d'écran ; le script pose
inertsur la carte tant qu'elle n'est pas entrée (mesuré :trueau chargement,falseune fois entrée), et le retire à chaque entrée. - Bouton : vrai
<button>avecaria-controlsetaria-expanded(truequand la carte est présente, mesuré). L'entrée automatique au chargement met lui-mêmearia-expandedà jour. - Mouvement réduit : sous
prefers-reduced-motion, aucune rotation : la carte apparaît et disparaît en fondu de 0,15 s (mesuré dans les trois moteurs : angle 0° à tout instant). - Contraste : texte blanc en gras de 13,6 px sur l'ambre
#f59e0b→#d97706, soit 2,2 à 3,2:1, insuffisant. Écrivez en brun foncé (#422006, comme la scène 1) ou foncez la carte (#b45309→#92400e: 5,0 et 7,1:1 avec du blanc).
Compatibilité navigateur
CSS (perspective, rotateY, backface-visibility, transitions) + 1,3 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : même entrée depuis −90°, même sortie vers +90°, même retour du même côté, bouton toujours cliquable après une sortie. Les transformations 3D existent partout depuis longtemps ; l'attribut inert depuis Chrome 102, Firefox 112 et Safari 15.5.
Avant inert, la rotation est la même mais la carte cachée reste lisible par un lecteur d'écran. Sans JavaScript, la carte reste cachée (de profil, opacité 0) : retirez rotateY(-90deg) et opacity: 0 de la règle de base si son contenu doit être lu sans script.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="flip-entry-stage">
<div class="flip-entry-wrapper">
<div class="flip-entry-card" id="flipEntryCard">…</div>
</div>
<button class="flip-entry-btn" type="button" aria-controls="flipEntryCard" aria-expanded="false">…</button>
</div>Le code complet HTML + CSS + JS de Flip Card Entry, 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 |
|---|---|---|
Angle d'entrée et de sortie (CSS — rotateY(-90deg) de base, rotateY(90deg) dans .flip-exit) |
−90° → 0° → +90° | Inversez les deux signes pour une carte qui arrive par la droite. rotateX à la place de rotateY la fait basculer depuis le haut, comme un volet. |
Perspective (CSS — perspective: 800px sur .flip-entry-wrapper) |
800 px | 400 px accentue l'effet de profondeur, 1 500 px l'aplatit. Gardez-la sur le cadre, pas sur la carte. |
| Durées (CSS — 0,6 s à l'entrée, 0,4 s à la sortie) | entrée plus lente que la sortie | Une sortie plus courte rend la main plus vite ; gardez au moins 0,3 s pour que la rotation se lise. |
Entrée au chargement (JS — setTimeout(…, 600)) |
la carte entre 600 ms après le chargement | Supprimez la ligne pour que la carte n'entre qu'au clic, ou appelez le même déclenchement quand votre contenu arrive (résultat d'une recherche, notification). |
Couleurs (CSS — background et color de .flip-entry-card) |
ambre #f59e0b → #d97706, texte blanc |
Voir la note de contraste : un texte foncé sur l'ambre, ou un fond plus sombre pour garder le blanc. |
FAQ
inert : carte à +90°, un clic au centre du bouton placé dessous touche la carte, et le bouton ne répond plus. pointer-events: none sur tous les états sauf .flip-visible règle la question ; ne le retirez pas si vous déplacez la carte près d'autres éléments.
