Cube Auto-Rotation
Un cube indigo translucide de 100 px, faces numérotées de 1 à 6, culbute sans fin sur deux axes à la fois : un tour complet en 8 s, à vitesse constante, sans aucune interaction. CSS pur, zéro JavaScript, arrêté de trois quarts 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-0011-root (fond #0a0a0f, 300 px de haut au minimum) centre un conteneur .cube-auto-container de 100 × 100 px qui porte la caméra : perspective: 600px. Dedans, .cube-auto garde ses enfants dans l'espace 3D (transform-style: preserve-3d) et six .cube-auto-face de 100 × 100 px sont empilées au même endroit puis repoussées chacune de 50 px (la moitié du côté) dans sa direction : translateZ(50px) pour la face avant, rotateY(180deg) translateZ(50px) pour l'arrière, rotateY(±90deg) pour les côtés, rotateX(±90deg) pour le dessus et le dessous. Les six faces ont la même couleur, rgba(99, 102, 241, .8), et un bord plein de 2 px #6366f1 : le cube se lit par ses arêtes et par la transparence, qui laisse deviner les faces de derrière.
L'animation rotateCube va de rotateX(0) rotateY(0) à rotateX(360deg) rotateY(360deg) en 8 s, linear, sans fin. Les deux angles avancent ensemble : le cube ne tourne pas autour d'un axe fixe mais culbute, et ce n'est jamais la même face qui revient devant au même rythme. Au bout de 8 s, les deux angles valent 360°, c'est-à-dire 0° : la boucle repart sans à-coup, d'autant que la vitesse est constante. Mesuré dans Chromium 151 et Firefox 153 : même culbute, environ 3 % des pixels du bloc changent toutes les 0,8 s, 0 erreur. Seule la propriété transform est animée : le navigateur la confie au compositeur, sans recalcul de mise en page.
Trois choix tiennent l'effet. La perspective est posée sur le conteneur et non sur le cube : la caméra reste fixe pendant que l'objet tourne devant elle. À 600 px pour un cube de 100 px, la déformation reste modérée, les arêtes proches à peine plus grandes que les lointaines. Enfin, rien ne doit « aplatir » .cube-auto : un overflow: hidden, un filter ou une opacity inférieure à 1 sur cet élément lui-même ramène les six faces dans un seul plan. Deux copies sur une page tournent chacune de leur côté (rien n'est partagé, pas de JavaScript). Le WebKit de Playwright aplatit toute 3D CSS, même un cube de référence minimal : le rendu sur un vrai Safari n'a pas pu être vérifié.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0011-rootarrête l'animation et pose le cube enrotateX(-25deg) rotateY(-35deg): une vue de trois quarts fixe, trois faces visibles. Mesuré dans Chromium et Firefox : 0 animation en cours et 0 % des pixels qui changent en 0,8 s (3,2 % sans la préférence). - Mouvement continu : une animation qui dure plus de 5 s à côté d'autres contenus doit pouvoir être arrêtée (critère WCAG 2.2.2). Le mouvement réduit l'arrête ; si le cube occupe le centre d'une page de lecture, ajoutez un bouton qui pose
animation-play-state: pausedsur.cube-auto. - Contenu décoratif : le cube ne porte que des chiffres. Dans un bandeau, mettez
aria-hidden="true"sur la racine, comme dans les exemples. Un texte écrit sur les faces passe à l'envers une fois sur deux : ne confiez jamais une information utile aux faces seules, écrivez-la aussi à côté. - Rythme : un tour en 8 s, vitesse constante, sans clignotement ni changement brusque de luminosité ; le mouvement reste dans un carré d'environ 170 px (la diagonale du cube).
Compatibilité navigateur
CSS (transform 3D, transform-style: preserve-3d, perspective, @keyframes), zéro JavaScript, aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : même culbute (0,13 % d'écart entre les deux sur l'image fixe du mouvement réduit), deux copies indépendantes, arrêt sous mouvement réduit, 0 erreur. Le WebKit de Playwright 26.5 aplatit toute 3D CSS, même un cube de référence : il ne dit rien du vrai Safari, qui n'a pas été vérifié.
Si preserve-3d n'est pas appliqué (navigateur ancien, ou overflow, filter, opacity < 1 posés sur .cube-auto), les six faces s'écrasent dans un même plan : on voit un carré qui se déforme en tournant. Le contenu reste visible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0011-root">
<div class="demo-3d">
<div class="cube-auto-container">
<div class="cube-auto">
<div class="cube-auto-face front">1</div> … (6 faces : front, back, right, left, top, bottom)
</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 — 8s dans l'animation de .cube-auto) |
8 s | 12 s pour un objet qui flotte derrière un titre, 4 s pour un indicateur d'attente. Gardez linear : avec ease-in-out, le cube marquerait un arrêt à chaque fin de tour. |
Axes de la culbute (CSS — @keyframes rotateCube) |
rotateX(360deg) rotateY(360deg) | rotateY(360deg) seul : le cube tourne comme sur un plateau, chaque face latérale passe devant à son tour. rotateX(360deg) rotateY(720deg) : deux tours horizontaux pour un vertical, une culbute plus irrégulière. Gardez des multiples de 360° pour que la boucle reste sans à-coup. |
Taille (CSS — 100px du conteneur et des faces, translateZ(50px)) |
100 px, faces repoussées de 50 px | Le recul vaut toujours la moitié du côté. Pour un cube de 160 px : conteneur et faces à 160 px, translateZ(80px) dans les six règles de faces. |
Couleur et transparence (CSS — background et border de .cube-auto-face) |
rgba(99, 102, 241, .8), bord 2 px #6366f1 | Sous 0,5 d'opacité, les faces arrière se lisent nettement à travers (verre, glace) ; à 1, le cube devient un bloc plein (sucre, dé). Un bord clair et fin dessine les arêtes quand les faces sont presque transparentes. |
Perspective (CSS — perspective de .cube-auto-container) |
600px | 300 px exagère la déformation (coins proches énormes) ; 1 200 px aplatit presque en vue isométrique. Gardez-la entre 4 et 10 fois la taille du cube. |
Contenu des faces (HTML — les six .cube-auto-face) |
chiffres 1 à 6 | Videz les faces pour un objet (glaçon, sucre) ou ne gardez qu'une gravure sur la face avant. Un texte sur plusieurs faces se lit à l'envers une fois sur deux. |
FAQ
rotateX et rotateY avancent ensemble : à chaque instant, l'axe de rotation réel est une diagonale qui change. Au bout de 8 s, les deux angles valent 360° et le cube retrouve exactement sa position de départ ; la boucle se répète donc à l'identique, mais à l'intérieur d'un tour aucune face ne revient devant à intervalle régulier..cube-auto-container:hover .cube-auto { animation-play-state: paused }. Ajoutez tabindex="0" au conteneur et :focus-visible dans la même règle pour que le clavier puisse aussi l'arrêter. Le cube s'immobilise dans la position où il se trouvait et repart de là.
