Isometric Grid
Neuf blocs indigo en grille de 3 × 3 vue en isométrie (inclinée à 60°, tournée de −45°), chacun fermé par une face avant et une face gauche de 20 px ; le bloc survolé, touché ou atteint au clavier monte de 30 px et vire au rose-violet, comme un tiroir qu'on sort — une case à la fois, en CSS pur, sans JavaScript.
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-0010-root (fond #0a0a0f, 300 px de haut au minimum) centre .isometric-container, qui porte perspective: 1000px, puis .isometric-grid : une grille CSS de 3 colonnes de 40 px, 8 px d'écart, tournée par transform: rotateX(60deg) rotateZ(-45deg) et en transform-style: preserve-3d pour que ses enfants gardent leur propre profondeur. Les neuf .isometric-cell (40 × 40 px, dégradé #6366f1 → #4f46e5, coins de 4 px, tabindex="0") sont elles aussi en preserve-3d : leurs pseudo-éléments deviennent des faces.
Chaque bloc a deux faces, celles que l'on voit avec cette rotation. ::before est la face avant : accrochée sous le bord bas de la case (top: 100%, 20 px de haut, #3730a3), elle pivote autour de ce bord (transform-origin en haut, rotateX(-90deg)) et tombe vers le sol. ::after est la face gauche : accrochée au bord gauche (right: 100%, 20 px de large, #4338ca), elle pivote autour de ce bord (rotateY(-90deg)). Les faces arrière et droite seraient cachées : elles ne sont pas dessinées. Au survol (ou :focus-visible), la case prend translateZ(30px) et un dégradé #d946ef → #a855f7, ses faces passent à #7c3aed et #8b5cf6, en 0,3 s. Les faces mesurant 20 px, le bloc levé flotte 10 px au-dessus du sol et laisse voir le trou sombre de sa place : un tiroir qu'on sort. Mesuré : 1,6 % des pixels changent au survol de la case du centre, à l'identique dans Chromium 151 et Firefox 153 (0,2 % d'écart entre les deux).
Seules les cases captent le pointeur : pointer-events: none sur la grille, auto sur les cases. Mesuré dans Chromium en émulation tactile : sans cette règle, le toucher est attribué à la grille inclinée et aucune case ne monte ; avec elle, la case touchée monte. C'est aussi ce qui fait qu'un pointeur posé dans un écart entre deux cases ne lève rien. Une seule règle :hover commande tout : il n'y a jamais qu'une case levée, celle sous le pointeur ou celle qui a le focus.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0010-rootannule l'élévation : la case survolée ou atteinte au clavier vire au rose-violet sur place. Mesuré dans Chromium et Firefox : transformation inchangée, 0,7 % de pixels changés au survol (1,6 % sans la préférence). - Clavier : les neuf cases ont
tabindex="0"; Tab les parcourt dans l'ordre de la grille, et le focus donne l'état du survol plus un liseré#f0abfcde 2 px (11,2:1 sur le fond). Les cases de la démo sont desdivvides : quand elles représentent quelque chose (une salle, un casier), donnez-leur un nom avecaria-labelet, si elles déclenchent une action,role="button"et la touche Entrée dans votre script. - Contraste : l'indigo des blocs mesure 4,4:1 sur le fond
#0a0a0f, le rose-violet 5,7:1 ; mais entre eux l'écart n'est que de 1,3:1. C'est l'élévation (et le liseré au clavier) qui signale la case, pas la couleur seule : en mouvement réduit, si le choix compte, ajoutez un texte ou une bordure. - Toucher : au doigt, la case touchée monte (mesuré en émulation tactile Chromium et dans Firefox) et reste levée jusqu'au toucher suivant.
Compatibilité navigateur
CSS 3D sur trois niveaux (perspective sur le conteneur, preserve-3d sur la grille puis sur chaque case, faces en pseudo-éléments), :focus-visible, aucune dépendance, aucun JavaScript. Mesuré dans Chromium 151 et Firefox 153 : même rendu au repos et au survol (0,2 % d'écart), même mouvement réduit, 0 erreur. Le WebKit de Playwright aplatit toute 3D en preserve-3d, même un cube de référence : ses captures ne disent rien de Safari. Rendu Safari non vérifié sur un vrai Safari.
Si le navigateur aplatit la 3D, les faces se rabattent dans le plan de la grille : on voit des cases plates, et l'élévation se lit à peine ; le changement de couleur au survol reste. Sans :focus-visible, le focus clavier n'a que l'anneau du navigateur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0010-root">
<div class="demo-3d">
<div class="isometric-container"> <!-- perspective: 1000px -->
<div class="isometric-grid"> <!-- rotateX(60deg) rotateZ(-45deg), preserve-3d -->
<div class="isometric-cell" tabindex="0"></div> <!-- ::before face avant, ::after face gauche -->
… (9 cases)
</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 |
|---|---|---|
Taille et nombre de cases (CSS — grid-template-columns et taille de .isometric-cell) |
repeat(3, 40px) ; 40 × 40 px ; 9 cases | Changez les deux ensemble, et ajoutez autant de div que de cases : repeat(4, 40px) et seize cases donnent un plateau de 4 × 4. |
Écart (CSS — gap de la grille) |
8 px | Sous 4 px, les blocs se touchent et la grille paraît une dalle pleine ; au-delà de 12 px, ils deviennent des îlots séparés. |
Hauteur des blocs (CSS — height de ::before et width de ::after) |
20 px | Changez les deux valeurs ensemble. Avec 30 px, égale à l'élévation, le bloc levé reste posé sur le sol au lieu de flotter. |
Élévation (CSS — translateZ du survol) |
30 px | 50 px fait sortir nettement le bloc ; plus haut, il masque une partie de la case située derrière lui. |
| Couleurs (CSS — dégradé de la case et fond des deux faces, au repos et au survol) | #6366f1 → #4f46e5, faces #3730a3 / #4338ca ; survol #d946ef → #a855f7, faces #7c3aed / #8b5cf6 | Gardez la face avant plus sombre que la face gauche, et les deux plus sombres que le dessus : c'est ce qui donne la lumière venant du haut. |
Angle de vue (CSS — rotateX(60deg) rotateZ(-45deg)) |
60° et −45° | Entre rotateX(55deg) et 65deg, la vue reste proche de l'isométrie. En passant à rotateZ(45deg), ce sont les faces avant et droite qui se voient : déplacez ::after sur le bord droit (left: 100%, pivot à gauche, rotateY(90deg)). |
FAQ
.is-selected) qui reprend les valeurs du survol — transform: translateZ(30px), le dégradé rose-violet et la couleur des deux faces — et posez-la sur la case choisie. La scène de la consigne fait exactement cela pour le casier attribué. Pensez à donner à cette case un nom lisible (aria-label, aria-current).
