Flip Card
Retournement 3D au survol en CSS pur — deux faces s'échangent avec un effet spring et zéro ligne de JavaScript.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 43 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur un contexte de projection 3D CSS : perspective: 1000px est posé sur le conteneur .card-flip-container, et transform-style: preserve-3d est appliqué à .card-flip. Cela crée un espace tridimensionnel dans lequel les faces enfants existent chacune sur leur propre plan Z, sans s'écraser l'une l'autre à l'écran.
La face arrière est pré-retournée à 180° dès le départ avec transform: rotateY(180deg), dos contre dos avec la face avant. La propriété backface-visibility: hidden sur les deux faces garantit que la face tournée loin de l'observateur reste invisible — c'est ce qui produit l'illusion d'une carte opaque à double face plutôt que d'une superposition transparente.
Au survol, .card-flip-container:hover .card-flip applique transform: rotateY(180deg) à l'assemblage — la face avant tourne et disparaît tandis que la face arrière, déjà pré-tournée, revient face à l'observateur. La transition cubic-bezier (.175, .885, .32, 1.275) produit un léger rebond (overshoot) au-delà de 180° avant de se stabiliser, ce qui donne le ressenti spring caractéristique.
L'effet est 100 % CSS, sans JavaScript. Aucun requestAnimationFrame, aucun écouteur d'événement, aucune dépendance externe — le navigateur délègue l'interpolation au moteur de compositing GPU. La durée de 0,8 s est un bon équilibre entre fluidité et réactivité perçue.
Accessibilité
- prefers-reduced-motion : ABSENT du code — la transition tourne toujours, même si l'OS préfère réduire le mouvement. Correctif minimal :
@media (prefers-reduced-motion: reduce) { .card-flip { transition: none; } }. - Déclencheur hover uniquement : la carte ne répond pas à la touche Tab ni à la navigation clavier dans l'état du code fourni. Ajouter
.card-flip-container:focus-within .card-flip { transform: rotateY(180deg); }corrige ce point sans modifier le HTML. - Les faces
.card-flip-frontet.card-flip-backne portent niroleniaria-labeldans le code de base — à enrichir selon le contenu (ex.role="group" aria-label="Carte équipe : face avant"). backface-visibility: hiddenmasque correctement la face tournée loin de l'observateur — aucun contenu fantôme n'est visible ni lu par les technologies d'assistance.- Le contraste du texte dépend du contenu ajouté : les gradients de fond fournis (indigo et rose) sont purement décoratifs ; les couleurs de texte superposées doivent respecter WCAG AA (ratio ≥ 4,5:1).
Compatibilité navigateur
Repose sur transform-style: preserve-3d et backface-visibility: hidden — supportés nativement dans tous les navigateurs modernes sans préfixe.
Sans support des transformations 3D CSS, la carte affiche uniquement la face avant à plat — aucune erreur, le contenu reste lisible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="card-flip-container">
<div class="card-flip">
<div class="card-flip-front">Face avant</div>
<div class="card-flip-back">Face arrière</div>
</div>
</div>Le code complet HTML + CSS + JS de Flip Card, 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 (sur .card-flip-container) | 1000px | Profondeur du contexte 3D. 600 px = vue rapprochée dramatique, 2000 px = retournement quasi-plan. Réduire pour accentuer l'effet de profondeur. |
| transition-duration (sur .card-flip) | 0.8s | Durée du flip. 0,4 s = réactif et net, 1,2 s = cinématique et lent. |
| cubic-bezier (sur .card-flip) | (.175,.885,.32,1.275) | Courbe d'accélération. La valeur par défaut produit un rebond spring. Remplacez par ease-in-out pour un flip fluide sans overshoot. |
| rotateY / rotateX (sur :hover .card-flip et .card-flip-back) | rotateY(180deg) | Axe du retournement. rotateX(180deg) donne un flip vertical (haut vers bas). Modifiez les deux occurrences (hover et pre-rotation back) simultanément. |
| --radius-xl (variable CSS :root) | 1rem | Arrondi des coins des deux faces. 0 = carte rectangulaire nette, 50% = carte circulaire (portrait uniquement). |
| width / height (sur .card-flip-container) | 280px / 180px | Dimensions de la carte. Toute proportion fonctionne — portrait (200×280 px), carré (240×240 px) ou paysage (320×180 px). |
| background (sur .card-flip-front) | linear-gradient(135deg,#6366f1,#8b5cf6) | Couleur ou gradient de la face avant. Remplacez par votre palette brand ou une image avec background-image. |
| background (sur .card-flip-back) | linear-gradient(135deg,#d946ef,#f43f5e) | Couleur ou gradient de la face arrière. Différenciez clairement les deux faces pour que le retournement soit immédiatement lisible. |
FAQ
:hover. Ajoutez au CSS : .card-flip-container:focus-within .card-flip { transform: rotateY(180deg); }. Un élément focusable (lien ou bouton) dans chaque face suffit à activer ce sélecteur — aucune modification du HTML de l'effet n'est nécessaire..card-flip-container.is-flipped .card-flip { transform: rotateY(180deg); }. Depuis votre script, basculez-la avec container.classList.toggle('is-flipped'). Le hover CSS peut coexister ou être supprimé. La transition joue dans les deux sens automatiquement.transform-style: preserve-3d et backface-visibility: hidden sont supportés nativement sans -webkit-. Si votre audience inclut Safari 14 ou antérieur, ajoutez -webkit-transform-style: preserve-3d et -webkit-backface-visibility: hidden en doublons.
