3D Carousel
Six petites tuiles dégradées de 80 × 60 px tournent en anneau autour d'un axe vertical, un tour en 10 s ; leur envers est masqué, si bien qu'on ne voit que les deux ou trois tuiles tournées vers soi. L'anneau s'arrête au survol, au focus clavier et à l'appui du doigt, pour lire la tuile de face. CSS pur, zéro JavaScript, immobile 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. 3D comprend 50 effets, dont 8 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0004-root (fond #0a0a0f, 300 px de haut au minimum) contient une scène .rcar-stage de 280 × 180 px qui porte la caméra (perspective: 800px). L'anneau .rcar-ring ne mesure que 80 × 60 px, la taille d'une tuile : il garde ses enfants en 3D (transform-style: preserve-3d) et tourne de rotateY(0) à rotateY(360deg) en 10 s, linear, sans fin (animation rcarSpin). Les six .rcar-tile sont superposées au centre puis placées par :nth-child : rotateY(0deg), 60deg… 300deg, chacune suivie de translateZ(100px). Chaque tuile a son dégradé à 135° et des coins arrondis de 0,75 rem.
Toutes les tuiles ont backface-visibility: hidden : dès qu'une tuile dépasse 90° et montre son dos, elle disparaît. Avec six tuiles espacées de 60° sur un rayon de 100 px, on voit donc à chaque instant la tuile de face et ses deux voisines de biais, avec des vides derrière : l'anneau se lit sans fouillis de tuiles inversées. La pause tient en une règle : .rcar-ring:hover et .rcar-stage:focus .rcar-ring passent l'animation en animation-play-state: paused. La scène porte tabindex="0" : la touche Tab l'atteint (contour de 2 px #a5b4fc au focus clavier), et un appui du doigt lui donne aussi le focus. Mesuré dans Chromium 151 et Firefox 153 : 8,1 % des pixels changent en 0,8 s quand l'anneau tourne, 0 % au survol, 0 % au focus clavier, 0 % après un appui tactile ; il repart quand le pointeur s'en va ou que le focus passe ailleurs.
Les classes portent le préfixe rcar- plutôt que .carousel et .carousel-item : ce sont les noms de Bootstrap, dont la règle .carousel-item { display: none } masquerait les tuiles sur un site qui l'utilise. L'animation ne touche que transform (prise en charge par le compositeur). Deux copies sur une page tournent et s'arrêtent chacune de leur côté. Le WebKit de Playwright aplatit toute 3D CSS, même un cube de référence : le rendu sur un vrai Safari n'a pas été vérifié.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0004-rootretire l'animation : l'anneau reste immobile, la tuile 1 de face et ses deux voisines de biais. Mesuré dans Chromium et Firefox : 0 animation en cours, 0 % des pixels qui changent en 0,8 s. - Clavier et toucher : la scène est atteignable à la touche Tab et l'anneau s'arrête tant qu'elle a le focus (contour visible au clavier) ; au doigt, un appui l'arrête, un appui ailleurs le relance. Le libellé de groupe (
aria-label) est à réécrire dans la langue de votre page. - Contraste : les libellés blancs de 12 px font 4,5:1 sur l'indigo, mais descendent à 2,2:1 sur l'ambre et 2,4:1 sur le cyan, sous le seuil de 4,5:1 pour un texte de cette taille. Foncez ces dégradés ou passez le texte à 18 px gras.
- Contenu : une tuile passée derrière est masquée, donc absente un moment de l'écran, mais son texte reste dans le HTML et un lecteur d'écran lit les six. Si les tuiles mènent quelque part, faites-en des liens et gardez la liste lisible ailleurs : une tuile qui tourne est une cible mobile.
Compatibilité navigateur
CSS (transform 3D, preserve-3d, backface-visibility, perspective, animation-play-state), zéro JavaScript, aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : même anneau (0,26 % d'écart sur l'image fixe), pause au survol, au focus et au toucher, deux copies indépendantes, 0 erreur. Le WebKit de Playwright 26.5 aplatit toute 3D CSS : le vrai Safari n'a pas été vérifié.
Sans preserve-3d, les six tuiles s'écrasent au centre de la scène et se recouvrent ; sans backface-visibility, les tuiles de derrière apparaissent en miroir. Le texte des tuiles reste dans la page.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0004-root">
<div class="demo-3d">
<div class="rcar-stage" tabindex="0" role="group" aria-label="…">
<div class="rcar-ring">
<div class="rcar-tile">Item 1</div> … (6 tuiles)
</div>
</div>
</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 |
|---|---|---|
Vitesse (CSS — 10s dans l'animation de .rcar-ring) |
10 s par tour | 15 à 20 s si les tuiles portent du texte à lire ; 6 s pour un simple ornement. Gardez linear. |
Rayon (CSS — translateZ(100px) des six .rcar-tile:nth-child(n)) |
100 px | Plus grand (140 px), les tuiles s'écartent et l'anneau s'élargit : élargissez aussi .rcar-stage. Plus petit que 70 px, les tuiles de six 80 px se chevauchent. |
| Nombre de tuiles (HTML et CSS) | 6, tous les 60° | Pour 8 tuiles : un angle tous les 45° et un rayon d'au moins 100 px. Chaque tuile a sa règle :nth-child (angle et dégradé). |
Envers (CSS — backface-visibility de .rcar-tile) |
hidden | visible montre aussi les tuiles de derrière, en miroir : un anneau complet mais du texte inversé. Gardez hidden dès que les tuiles portent des mots. |
Pause (CSS — règle .rcar-ring:hover, .rcar-stage:focus .rcar-ring) |
survol, focus clavier, appui du doigt | Pour que seul le clavier et le survol l'arrêtent (pas un clic de souris), ajoutez .rcar-stage:focus:not(:focus-visible) .rcar-ring { animation-play-state: running }, comme dans les scènes ci-dessus. Pour ne jamais l'arrêter, supprimez la règle et le tabindex. |
Taille des tuiles (CSS — width / height de .rcar-ring et .rcar-tile) |
80 × 60 px | Changez les deux règles ensemble. Pour des libellés longs, 100 × 70 px avec un rayon de 120 px. |
FAQ
backface-visibility: hidden) : une tuile tournée de plus de 90° montre son dos et disparaît. On voit la tuile de face et ses deux voisines ; les autres réapparaissent en revenant vers l'avant. C'est voulu : les mots ne passent jamais à l'envers à l'écran.tabindex="0" : un appui du doigt lui donne le focus, et la règle .rcar-stage:focus .rcar-ring met l'anneau en pause (mesuré : 0 % de pixels qui changent après l'appui). Un appui ailleurs sur la page lui retire le focus et il repart..carousel et .carousel-item sont des classes de Bootstrap. Sur un site qui charge Bootstrap, sa règle .carousel-item { display: none } cacherait les tuiles, et ses transitions se mêleraient à l'anneau. Le préfixe rcar- évite la collision ; gardez-le si vous renommez.
