3D Carousel
Cinq cartes posées sur un anneau en perspective : les flèches ou un glisser font tourner l'anneau d'un cran et amènent la carte suivante devant.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Galerie comprend 44 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La scène .c3d-stage porte la perspective ; dedans, l'anneau .c3d-ring garde la 3D (transform-style: preserve-3d) et chaque .c3d-card est centrée au milieu. Pour chaque carte, le script calcule son angle sur le cercle (360° / nombre de cartes × écart avec la carte active), puis la place en translateX (sinus) et translateZ (cosinus, vers le fond). Plus une carte est loin, plus elle est petite (échelle de 0,5 à 0,83), transparente et basse dans l'empilement (z-index). Le passage d'une position à l'autre dure 0,6 s.
Rien ne tourne seul : seules les flèches ‹ › et un glisser horizontal de plus de 50 px (doigt ou souris) font avancer l'anneau d'un cran, en boucle. Un clic sur une carte ne fait rien.
Les dimensions suivent la largeur de la scène, lue à chaque redimensionnement (ResizeObserver) : rayon = 40 % de la largeur, perspective = 2 fois la largeur, carte = 32 % de la largeur. À 495 px on retrouve les valeurs d'origine (rayon 200 px, perspective 1000 px, carte 160 px) ; à 360 px tout rétrécit dans les mêmes proportions et rien ne dépasse de l'écran. Chaque .fx-0167-root de la page a son propre anneau.
Accessibilité
- Flèches nommées : vrais boutons « Carte précédente » / « Carte suivante », posés au-dessus de l'anneau, avec contour
:focus-visible. - Une seule carte active : les quatre cartes de l'arrière sont
inert; un lecteur d'écran et le clavier n'atteignent que la carte de devant (« diapositive, 2 sur 5 »). - Rôles : région
aria-roledescription="carrousel"nommée, cartesrole="group"; textes dans le HTML, à traduire. - Mouvement réduit : sous
prefers-reduced-motion: reduce, l'anneau saute directement à la nouvelle position, sans rotation animée. - Toucher : Pointer Events et
touch-action: pan-ysur la scène : glisser horizontalement fait tourner l'anneau, la page défile toujours verticalement.
Compatibilité navigateur
3D CSS (perspective, preserve-3d), propriété translate (Chrome 104, Firefox 72, Safari 14.1), aspect-ratio, ResizeObserver et inert (Chrome 102, Firefox 112, Safari 15.5 d'après MDN). Mesuré dans Chromium 151 et Firefox 153 (Playwright) : deux anneaux dont le 2e piloté seul, mouvement réduit, 390 px sans défilement horizontal, glisser au doigt (Chromium), 0 erreur. Le WebKit de Playwright aplatit la 3D CSS : la navigation y fonctionne, mais le rendu en relief n'a pas pu être vérifié pour Safari.
Sans JavaScript, les cinq cartes sont empilées au centre et les flèches ne font rien. Sans 3D CSS, les cartes restent alignées à plat, la navigation marche toujours.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0167-root">
<div class="c3d-slider" role="region" aria-roledescription="carrousel" aria-label="…">
<div class="c3d-stage">
<div class="c3d-ring">
<div class="c3d-card" role="group" aria-roledescription="diapositive" aria-label="1 sur 5">…</div>
…
</div>
</div>
<button class="c3d-arrow c3d-prev" type="button" aria-label="…">…</button>
<button class="c3d-arrow c3d-next" type="button" aria-label="…">…</button>
</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 |
|---|---|---|
Largeur maximale (CSS — --c3d-max-width) |
520px | La scène prend la largeur de son conteneur jusqu'à cette limite ; rayon, perspective et cartes suivent. |
Proportions de la scène (CSS — --c3d-ratio) |
9 / 4 | Hauteur de la zone qui contient l'anneau. Augmentez-la pour des cartes en portrait. |
Largeur des cartes (CSS — --c3d-card-w) |
32.3% | En pourcentage de la scène. Au-delà de 40 %, les cartes de côté se chevauchent davantage. |
Format des cartes (CSS — --c3d-card-ratio) |
16 / 10 | 3/4 pour des couvertures de livres ou des cartes de jeu. |
Contenu des cartes (HTML — .c3d-card) |
5 dégradés « Slide 1 » à « Slide 5 » | Une <img> couvre la carte ; texte et boutons acceptés. L'anneau s'adapte au nombre de cartes (360° / N par cran). |
Durée de rotation (CSS — .c3d-card transition) |
.6s | Vitesse à laquelle une carte rejoint sa nouvelle place. |
FAQ
.c3d-card:not([inert]) { opacity: 1 !important }.
