Cylinder Marquee 3D
Un tambour 3D en CSS bâti depuis votre liste : il tourne seul, se lance d'un glisser avec inertie et s'arrête au survol, au focus ou sur Pause.
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
Vous écrivez une simple liste <ul class="cmq-items"> (au moins trois <li>). Le script en fait autant de facettes .cmq-face, posées en cercle avec rotateY(i × 360°/N) translateZ(r) ; le rayon r = (largeur/2) / tan(π/N) est calculé pour que les facettes se touchent, quel que soit leur nombre. Le parent .cmq-drum garde la 3D (transform-style: preserve-3d) et une perspective de 700 px donne la profondeur.
À chaque image, le tambour tourne de 54°/s (vitesse calculée sur le temps écoulé) et chaque facette reçoit une opacité et une luminosité qui suivent le cosinus de son angle : celle de face est nette, celles de dos s'éteignent sans disparaître. Glisser n'importe où dans la scène, à la souris ou au doigt, fait tourner le tambour (0,35° par pixel) ; au lâcher, il garde l'élan du geste puis revient à sa vitesse de croisière.
Survoler la scène ou y placer le focus clavier ralentit le tambour jusqu'à l'arrêt. Le bouton Pause le fige ; en pause, les flèches ‹ › apparaissent et amènent la facette suivante ou précédente au premier plan, annoncée dans une zone aria-live. Chaque racine .fx-0832-root a son propre tambour, et la boucle s'arrête quand la scène sort de l'écran.
Accessibilité
- Contenu lisible : la liste
.cmq-itemsreste dans la page, masquée visuellement mais lue par les lecteurs d'écran ; les facettes 3D, qui en sont la copie, portentaria-hidden="true". La scène est une régionaria-roledescription="carrousel"nommée pararia-label. - Arrêt : survol et focus clavier arrêtent la rotation ; le bouton Pause (
aria-pressed) la fige jusqu'au clic suivant (WCAG 2.2.2). - Mouvement réduit : sous
prefers-reduced-motion: reduce, le tambour ne tourne jamais seul ; les flèches ‹ › sont affichées, chaque clic tourne d'une facette (transition de 0,38 s) et annonce son texte. Le glisser reste possible, sans élan : au lâcher, le tambour se cale sur la facette la plus proche. - Toucher :
touch-action: pan-ylaisse la page défiler quand le doigt glisse verticalement ; seul un glisser horizontal fait tourner le tambour.
Compatibilité navigateur
Transformations 3D CSS (preserve-3d, perspective), Pointer Events avec setPointerCapture, IntersectionObserver (testé avant usage). Mesuré le 08/11/2026 dans Chromium et Firefox : rotation à 54°/s, arrêt au survol, au focus et au bouton, deux copies indépendantes, flèches sous mouvement réduit, glisser au doigt à 390 px. Le WebKit de Playwright aplatit la 3D : la rotation et les commandes y fonctionnent, mais le rendu 3D n'a pas pu être vérifié pour Safari.
Sans transform-style: preserve-3d, une règle @supports met les facettes à plat les unes à côté des autres. Sans JavaScript, seul le fond de la scène s'affiche et la liste reste lisible par les lecteurs d'écran.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0832-root" data-cmq-speed="54" data-cmq-face-w="120" data-cmq-face-h="88">
<div class="cmq-scene" role="region" aria-roledescription="carrousel" aria-label="…">
<ul class="cmq-items">
<li>…</li>
</ul>
<div class="cmq-perspective" aria-hidden="true"><div class="cmq-drum"></div></div>
<div class="cmq-reflection" aria-hidden="true"></div>
<div class="cmq-glow" aria-hidden="true"></div>
<div class="cmq-vignette" aria-hidden="true"></div>
<button class="cmq-pause-btn" type="button" aria-label="…" aria-pressed="false">⏸</button>
<div class="cmq-nav">
<button class="cmq-nav-btn cmq-prev" type="button" aria-label="…">‹</button>
<button class="cmq-nav-btn cmq-next" type="button" aria-label="…">›</button>
</div>
<div class="cmq-live" aria-live="polite" aria-atomic="true"></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 |
|---|---|---|
Facettes (HTML — <li> de .cmq-items) |
8 mots de démonstration | Au moins trois éléments. Texte et éléments en ligne (<b>, petite <img>) sont recopiés sur les facettes ; les liens n'y sont pas cliquables (facettes masquées et hors clavier). |
Vitesse (HTML — data-cmq-speed sur .fx-0832-root) |
54 (degrés par seconde) | De 0 à 360. À 0, le tambour ne tourne qu'au glisser. |
Taille des facettes (HTML — data-cmq-face-w, data-cmq-face-h) |
120 × 88 px | Le rayon du tambour en découle : plus de facettes ou plus larges = tambour plus grand. |
Hauteur de scène (CSS — .cmq-scene et .cmq-perspective) |
300 px et 260 px | Redéfinissez les deux hauteurs pour une bande basse ou une petite pastille. |
Profondeur (CSS — perspective de .cmq-perspective) |
700px | Plus petit = 3D plus marquée, plus grand = tambour plus plat. |
Couleurs (CSS — .cmq-face-inner, .cmq-label, .cmq-glow) |
Violet #a78bfa, fond #0a0814 | Bordure, fond et lueur du texte des facettes, halo central ; .cmq-reflection et .cmq-vignette peuvent être masqués. |
FAQ
data-cmq-face-w ou agrandissez la scène pour que le tambour ne soit pas coupé.overflow: hidden ou filter posé sur .cmq-drum lui-même, ou un parent en transform-style: flat entre la perspective et le tambour. Gardez .cmq-perspective comme parent direct de .cmq-drum..cmq-live annonce son texte. Sous mouvement réduit, elles sont affichées en permanence.
