Isometric Grid
Une dalle de 4 × 4 blocs indigo vue en isométrie (tournée de 45°, inclinée à 60°) : les blocs à moins de 60 px du pointeur montent d'autant plus qu'ils sont proches (jusqu'à 25 px) et prennent un halo, si bien qu'une bosse de plusieurs blocs suit la souris — ou se forme là où l'on touche, ou se déplace aux flèches du clavier. 4 Ko de JavaScript, une instance par dalle.
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-0026-root (fond #0a0a0f, 300 px de haut au minimum) centre la dalle .iso-grid[data-iso-grid] : 220 × 220 px, transform: rotateX(60deg) rotateZ(45deg), preserve-3d, curseur en croix, tabindex="0". Il n'y a pas de perspective : les arêtes parallèles le restent, c'est une vraie vue isométrique. Les seize .iso-block sont écrits dans le HTML (42 × 42 px tous les 46 px, colonne et rangée dans data-col et data-row) ; chacun porte un dessus .iso-block-top (dégradé #6366f1 → #818cf8) et deux faces de 20 px rabattues par rotateX(-90deg) et rotateY(90deg), celles que l'on voit avec cette rotation.
Le script cherche chaque [data-iso-grid] de la page. Il ne crée les blocs que s'ils manquent, puis, à chaque pointermove sur la dalle, mesure à l'écran la distance entre le pointeur et le centre de chaque bloc. Sous 60 px, le bloc reçoit translateZ((60 − d) / 60 × 25 px) et la classe raised (dessus #818cf8 → #a5b4fc, halo rgba(99, 102, 241, .5) de 20 px) ; au-delà, il redescend. Les transitions CSS de 0,3 s lissent le tout. Quand la souris quitte la dalle, tout retombe. Mesuré dans Chromium 151 et Firefox 153 : pointeur sur un bloc du centre, 9 blocs levés, le plus haut à 25 px ; 6,8 % des pixels changent. Les distances sont prises à l'écran, après la rotation : la bosse est ronde pour l'œil, pas sur la dalle.
Au doigt, pointerdown forme la bosse là où l'on touche, et elle reste jusqu'au toucher suivant (le défilement de la page n'est pas bloqué). Au clavier, Tab donne le focus à la dalle (liseré #a5b4fc), la bosse se forme sur un bloc du centre, et les flèches la déplacent d'un bloc le long des colonnes et des rangées ; elle retombe quand la dalle perd le focus. Mesuré : deux appuis sur → amènent la bosse contre le bord. Chaque mouvement relit la position de 17 éléments : 0,3 ms dans Chromium et 1,7 ms dans Firefox par mouvement, mesuré sur 300 mouvements. Deux dalles sur une page : chacune a son instance, mesuré, seule la dalle survolée réagit.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le script ne pose aucune élévation et un bloc CSS limité à.fx-0026-rootannule celle de la classeraised: les blocs ne bougent pas, ceux qui sont près du pointeur s'éclairent et prennent leur halo. Mesuré dans Chromium et Firefox : 9 blocs éclairés, aucune transformation, 5,7 % de pixels changés (6,8 % sans la préférence). - Clavier : la dalle se prend au clavier (Tab), les flèches déplacent la bosse, et elle porte
aria-label="Isometric grid", à traduire dans la langue de votre page. Elle reste un décor : un lecteur d'écran n'annonce que ce nom. Si la dalle porte une information (une zone couverte, un niveau), écrivez-la à côté en texte. - Contraste : le dessus éclairé ne se distingue du dessus normal que de 1,5:1 ; c'est le relief, puis le halo, qui montrent la bosse. Sur fond clair, assombrissez les faces pour garder le volume.
- Toucher : mesuré en émulation tactile Chromium et dans Firefox, un toucher sur la dalle lève les blocs autour du doigt ; le script n'empêche pas la page de défiler quand on glisse.
Compatibilité navigateur
JavaScript (Pointer Events, getBoundingClientRect, classList, matchMedia, 4 Ko) + CSS 3D sur trois niveaux (preserve-3d sur la dalle, les blocs et leurs faces, sans perspective), aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : même bosse (9 blocs, 25 px au plus), même clavier, même mouvement réduit, deux dalles indépendantes, 0 erreur. Le WebKit de Playwright aplatit toute 3D en preserve-3d, même un cube de référence : rendu Safari non vérifié sur un vrai Safari.
Sans JavaScript, la dalle reste affichée avec ses seize blocs à plat : rien ne monte. Si le navigateur aplatit la 3D, les faces se rabattent dans le plan et l'élévation ne se voit plus ; l'éclairage et le halo des blocs proches restent.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0026-root">
<div class="iso-grid" data-iso-grid tabindex="0" aria-label="Isometric grid"> <!-- rotateX(60deg) rotateZ(45deg) -->
<div class="iso-block" data-col="0" data-row="0" style="left: 0px; top: 0px; width: 42px; height: 42px;">
<div class="iso-block-top"></div>
<div class="iso-block-right"></div>
<div class="iso-block-front"></div>
</div>
… (16 blocs)
</div>
</div>
<!-- + le script : une instance par [data-iso-grid] (pointeur, toucher, flèches) -->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 d'influence (JS — 60 dans raiseAround, trois fois) |
60 px | Changez les trois occurrences ensemble. 90 px donne une bosse plus large et plus douce ; 40 px ne lève que le bloc sous le pointeur et ses voisins immédiats. |
Hauteur maximale (JS — * 25) |
25 px | 40 px fait une bosse marquée ; au-delà de la moitié de la taille d'un bloc, les blocs levés masquent ceux qui sont derrière. |
Taille et nombre de blocs (JS — cols, rows, size, gap ; HTML — styles des blocs ; CSS — taille de .iso-grid) |
4 × 4 ; 42 px ; 4 px ; dalle de 220 px | Les blocs du HTML gardent leurs tailles écrites : changez-les aussi, ou supprimez-les et laissez le script les créer à partir de cols, rows, size et gap. |
Couleurs (CSS — .iso-block-top, .iso-block-right, .iso-block-front, .iso-block.raised) |
#6366f1 → #818cf8 ; faces #4f46e5 et #4338ca ; levé #818cf8 → #a5b4fc, halo rgba(99, 102, 241, .5) | Les faces doivent rester plus sombres que le dessus pour garder le volume. Le halo est un box-shadow : sur fond clair, une teinte brune ou grise à 30 % suffit. |
Douceur (CSS — transition de .iso-block) |
transform .3s, box-shadow .3s | 0,15 s donne une bosse qui colle au pointeur ; 0,6 s, une vague qui traîne derrière. |
Angle (CSS — rotateX(60deg) rotateZ(45deg) de .iso-grid) |
60° et 45° | Avec rotateZ(-45deg), ce sont d'autres faces qui se voient : il faudrait déplacer .iso-block-front sur le bord gauche. |
FAQ
cols, rows, size et gap.
