Stacked Cards
Trois cartes superposées s'étalent en éventail au survol — animation CSS pure avec rebond, zéro dépendance.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Les trois éléments .card-stack-item sont positionnés en absolus dans leur conteneur (position: absolute; width: 100%; height: 100%) et se superposent exactement au repos. L'ordre d'empilement est contrôlé par des z-index décroissants (3 → 2 → 1 du premier au troisième enfant) : la carte d'index 1 est visible au premier plan.
Au survol du .card-stack-container, le sélecteur CSS :hover .card-stack-item:nth-child(n) applique trois transform distincts : la carte du dessus glisse à gauche (translateX(-40px) rotate(-8deg)), la carte centrale monte (translateY(-10px) sans rotation), la carte du bas glisse à droite (translateX(40px) rotate(8deg)). Aucun script ne déclenche ce mouvement.
La transition utilise 0.4s cubic-bezier(.175, .885, .32, 1.275) — un easing de type back-out dont le quatrième paramètre (1.275 > 1) provoque un léger dépassement de position en fin de course, donnant un effet de ressort naturel à l'atterrissage.
Seule la propriété transform est animée : cette propriété est composée sur le GPU par le navigateur, ce qui évite tout reflow ou repaint de la page. L'effet reste performant même sur des listes denses de cartes.
Accessibilité
- prefers-reduced-motion : ABSENT du code de base. Aucune règle
@media (prefers-reduced-motion: reduce)n'est présente — la transition s'exécute quelle que soit la préférence système. Ajouter@media (prefers-reduced-motion: reduce) { .card-stack-item { transition: none } }si l'animation peut gêner. - Interaction clavier : l'effet repose uniquement sur
:hover(souris). Les utilisateurs au clavier ne voient pas l'éventail. Pour les rendre accessibles, remplacer:hoverpar:hover, :focus-withinsur.card-stack-container. - Contraste texte : les cartes portent des dégradés violets/fuchsia (
#6366f1 → #d946ef) sur fond#12121a. Un texte blanc sur ces dégradés dépasse largement le ratio WCAG AA (≥ 4,5:1). - Sémantique : le conteneur est un
<div>sans rôle ARIA. Si les cartes représentent un contenu fonctionnel (sélection, navigation), ajouterrole="group"et unaria-labeldécrivant l'ensemble. - Touch : sur mobile,
:hoverse déclenche au premier tap, le retour au second — comportement natif du navigateur, généralement acceptable pour un effet purement décoratif.
Compatibilité navigateur
Effet 100 % CSS — transformations et transitions. Supporté dans tous les navigateurs modernes depuis 2015.
Sans support des transitions CSS, les cartes se superposent et s'écartent instantanément au survol — aucun script ne plante, la mise en page reste intacte.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="card-stack-container">
<div class="card-stack-item">Carte 1</div>
<div class="card-stack-item">Carte 2</div>
<div class="card-stack-item">Carte 3</div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --bg-card | #12121a | Variable CSS — couleur de fond de repli des cartes. Remplacer par votre fond de carte brand si vous n'utilisez pas de dégradé. |
| --radius-xl | 1rem | Variable CSS — rayon des coins de chaque carte. Augmenter (ex. 1.5rem) pour un aspect plus arrondi, réduire (ex. 0.5rem) pour un style anguleux. |
| --border | rgba(255,255,255,0.08) | Variable CSS — couleur et opacité du contour des cartes. Augmenter l'opacité (ex. 0.20) pour un relief plus marqué sur fond clair. |
| translateX(±40px) | ±40px | Amplitude d'évasement latéral (lignes nth-child 1 et 3 du bloc :hover). Augmenter pour espacer davantage les cartes (ex. ±60px pour des cartes larges de type CB). |
| rotate(±8deg) | ±8deg | Angle d'inclinaison des cartes latérales. Réduire (ex. ±4deg) pour un effet sobre, augmenter (ex. ±14deg) pour un éventail expressif. |
| translateY(-10px) | -10px | Soulèvement de la carte centrale au survol. Mettre à 0 pour supprimer ce mouvement, augmenter (ex. -20px) pour un lift plus prononcé. |
| transition: .4s cubic-bezier(…) | .4s / back-out | Durée et easing de toutes les cartes (ligne transition sur .card-stack-item). Remplacer par 0.25s ease-out pour supprimer le rebond, ou par 0.6s pour ralentir. |
| background (nth-child) | dégradés indigo→fuchsia | Chaque carte a son propre background sur :nth-child(1/2/3). Remplacer par une couleur unie, un dégradé brand, ou un background-image pour du contenu illustré. |
FAQ
:hover avec des transform et une transition — aucun script n'est requis. Il s'intègre nativement dans React, Vue, Svelte ou tout autre framework sans directive ni hook..card-stack-item dans le conteneur et étendez les sélecteurs :nth-child(n) dans le bloc :hover. Distribuez les rotations symétriquement (ex. ±6° / 0° / ±12° pour 4 cartes) et ajustez les translateX pour éviter les chevauchements.<input type="checkbox"> caché couplé à un label déclenche l'état :checked qui active les transform via un sélecteur adjacent. Pour plus de contrôle (toggle programmatique, état persistant), une ligne de JS suffira : ajouter/retirer une classe sur le conteneur au clic.
