Prism Rotation
Six panneaux translucides de 100 × 120 px, lettrés de A à F, tournent autour d'un axe vertical, un tour en 6 s. Leur rayon de 50 px est plus court que celui d'un hexagone fermé : les faces se croisent et mêlent leurs couleurs comme une lanterne de papier. CSS pur, zéro JavaScript, arrêté sur une vue fixe 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-0016-root (fond #0a0a0f, 300 px de haut au minimum) centre .prism-container, qui porte la caméra (perspective: 800px). Dedans, .prism mesure 100 × 120 px, garde ses enfants en 3D (transform-style: preserve-3d) et tourne : rotatePrism, de rotateY(0) à rotateY(360deg) en 6 s, linear, sans fin. Les six .prism-face de 100 × 120 px sont superposées puis placées par :nth-child : rotateY(0deg), 60deg, 120deg… jusqu'à 300deg, chacune suivie de translateZ(50px). Chaque panneau a sa couleur à 70 % d'opacité (indigo, violet, magenta, rose, cyan, vert), un bord de 1 px et sa lettre en 12 px.
Tout tient au rayon. Pour que six panneaux de 100 px ferment un hexagone, il faudrait les repousser de 100 × √3 / 2 ≈ 86,6 px du centre. À 50 px, chaque panneau dépasse de chaque côté de la place qui lui revient et traverse ses deux voisins : on ne voit pas un prisme fermé mais une lanterne de plans qui se croisent, où les couleurs translucides se superposent et se mélangent. Les envers restent visibles (pas de backface-visibility: hidden) : les lettres des panneaux de derrière apparaissent en miroir à travers ceux de devant. Pour un vrai prisme fermé, portez le translateZ à 87px dans les six règles, comme dans le présentoir de cartes postales et la colonne d'affiches ci-dessus. Mesuré : environ 10 % des pixels du bloc changent toutes les 0,8 s dans Chromium 151 et Firefox 153.
Des plans qui se croisent obligent le navigateur à les découper pour les dessiner dans l'ordre de profondeur, et chaque moteur le fait à sa façon. Sur la même image fixe (mouvement réduit), 4,9 % des pixels diffèrent entre Chromium et Firefox : la lanterne est la même, mais l'empilement des couleurs aux croisements n'est pas identique. Avec le rayon de 87 px, les panneaux ne se croisent plus et cet écart disparaît. Comme pour toute 3D CSS, rien ne doit aplatir .prism (overflow, filter, opacity inférieure à 1 sur lui-même). Le WebKit de Playwright aplatit toute 3D CSS : 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-0016-rootarrête la rotation et tourne la lanterne de-20deg: une vue fixe où les faces qui se croisent restent lisibles. Mesuré dans Chromium et Firefox : 0 animation en cours, 0 % des pixels qui changent en 0,8 s (10,4 % sans la préférence). - Mouvement continu : la rotation dure plus de 5 s ; à côté d'un texte à lire, prévoyez un moyen de l'arrêter (WCAG 2.2.2), par exemple
animation-play-state: pausedau survol ou sur un bouton. Le mouvement réduit l'arrête déjà. - Lisibilité : au rayon de 50 px, un panneau n'est jamais entièrement visible seul ; n'y mettez pas d'information à lire (une lettre, un motif). Pour des affiches ou des cartes à lire, fermez le prisme (rayon de 87 px) et répétez l'essentiel en dehors.
- Contenu décoratif : dans un bandeau, mettez
aria-hidden="true"sur la racine, comme dans les exemples ; la liste des contenus (les six soirées, les six cartes) gagne à exister aussi en texte.
Compatibilité navigateur
CSS (transform 3D, preserve-3d, perspective, @keyframes), zéro JavaScript, aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : même rotation, deux copies indépendantes, arrêt sous mouvement réduit, 0 erreur ; aux croisements des panneaux, l'ordre d'empilement des couleurs diffère (4,9 % des pixels sur l'image fixe). Le WebKit de Playwright 26.5 aplatit toute 3D CSS : le vrai Safari n'a pas été vérifié.
Sans preserve-3d (ou si .prism est aplati par overflow, filter ou opacity < 1), les six panneaux s'écrasent dans un plan et la rotation ne montre plus qu'un rectangle qui s'élargit et se rétrécit. Les lettres restent visibles.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0016-root">
<div class="demo-3d">
<div class="prism-container">
<div class="prism">
<div class="prism-face">A</div> … (6 panneaux, A à F)
</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 |
|---|---|---|
Rayon (CSS — translateZ(50px) des six .prism-face:nth-child(n)) |
50 px (panneaux qui se croisent) | 87px ferme l'hexagone : un prisme net, chaque face lisible à son tour. Entre 60 et 80 px, les panneaux se touchent à peine sur les bords. Au-delà de 87 px, ils s'écartent et laissent des fentes. |
Vitesse (CSS — 6s dans l'animation de .prism) |
6 s | 10 à 12 s pour des panneaux à lire (affiches, cartes) ; 4 s pour un ornement. Gardez linear pour une colonne qui tourne sans à-coup. |
Taille des panneaux (CSS — width / height de .prism, .prism-face) |
100 × 120 px | Le rayon qui ferme le prisme vaut largeur × 0,866 : 120 px de large demandent translateZ(104px). La hauteur est libre. |
Couleurs (CSS — background de chaque :nth-child) |
indigo, violet, magenta, rose, cyan, vert à 70 % | Des teintes voisines à 50-60 % donnent une lanterne chaude ; des fonds opaques (90 % et plus) conviennent au prisme fermé, où l'on veut lire un panneau à la fois. |
Perspective (CSS — perspective de .prism-container) |
800px | 500 px accentue le relief (le panneau de face paraît nettement plus grand) ; 1 400 px donne une colonne presque plate. |
| Nombre de panneaux (HTML et CSS) | 6, tous les 60° | Pour 8 panneaux : un angle tous les 45° et, pour fermer, un rayon de largeur / (2 × tan 22,5°) ≈ 1,21 × largeur. Ajoutez une règle :nth-child par panneau. |
FAQ
translateZ(50px) par translateZ(87px) dans les six règles.
