Layered Parallax 3D
Trois plaques translucides indigo, violette et magenta empilées à 0, 30 et 60 px de profondeur, avec une pastille rose « 3D » encore plus en avant : toute la pile s'incline vers le pointeur jusqu'à 10° et les couches se décalent les unes sur les autres comme une coupe qu'on fait pivoter — elle se pilote aussi au doigt ou aux flèches, et se fige de face pour qui a choisi de limiter 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
Au milieu de .fx-0007-root, fond presque noir d'au moins 300 px de haut, le cadre .demo-3d (280 × 200 px) accueille la pile. .parallax-container (200 × 140 px) porte la perspective (perspective: 1000px) et écoute le pointeur ; son enfant .lp3d-scene est en transform-style: preserve-3d et contient les couches. La couche du fond est indigo (rgba(99, 102, 241, .3)) à 0 px ; la deuxième violette (rgba(139, 92, 246, .4)) avancée de 30 px et réduite à 90 % ; la troisième magenta (rgba(217, 70, 239, .5)) à 60 px et 80 %. La pastille .lp3d-layer-4, 60 × 60 px, dégradé #f43f5e → #ec4899, est à 90 px ; avec inset: auto, elle reste à sa place naturelle, dans l'angle haut gauche de la pile.
Chaque pile de la page a son instance du script. Quand le pointeur passe sur .parallax-container, sa position (de 0 à 1) fait pivoter .lp3d-scene (rotateX, rotateY) : le côté sous le pointeur vient vers vous, jusqu'à 10° sur les bords (9,1° et 8,9° relevés à 5 % du coin, pareil sous Chromium 151 et Firefox 153). Comme les couches sont à des profondeurs différentes, elles ne tournent pas autour du même plan : pointeur au bord droit, la couche magenta glisse de 10,9 px par rapport à celle du fond et la pastille de 15,3 px ; pointeur en haut, la pastille descend de 17 px. C'est ce décalage, et non une simple inclinaison, qui fait lire une épaisseur. Le pivot est amorti sur 0,1 s ; dès que le pointeur s'en va, la pile se remet de face.
Au doigt ou au stylet, la pile tourne de la même façon (événements pointer) ; touch-action: none empêche la page de défiler pendant le geste, et la pile se redresse quand on lève le doigt. Au clavier, la zone prend le focus (tabindex="0", nommée par role="group" et aria-label) : chaque flèche décale d'un dixième le point vers lequel la pile se tourne, Échap ou un Tab plus loin la remettent de face. L'angle est calculé en fraction de la zone, pas en pixels : une pile agrandie à 400 × 220 px, comme dans les scènes, s'incline toujours de 10° au plus. Attention : sur .lp3d-scene, un débordement masqué, un filtre ou une opacité sous 1 aplatissent la 3D et suppriment le décalage des couches.
Accessibilité
- Mouvement réduit : si le système demande moins d'animation (
prefers-reduced-motion: reduce), une règle propre à.fx-0007-rootannule la rotation de.lp3d-sceneet sa transition. La pile reste de face, immobile ; ses couches se lisent comme trois cadres emboîtés avec la pastille dans l'angle. Les trois moteurs testés (Chromium, Firefox, WebKit) donnent 0° sous la souris, contre 9° normalement. - Clavier : en tabulant, on arrive sur la pile, signalée par un anneau rose
#f9a8d4de 2 px écarté de 6 px (:focus-visible, 10,9:1 sur le fond). → ×4 puis ↑ ×2 la font pivoter de 8,0° et 4,0° ; Échap, ou partir vers l'élément suivant, la redresse. - Lecteurs d'écran : la pile s'annonce comme un groupe nommé « Layered stack: the arrow keys tilt it » (
aria-label). Les couches vides ne sont pas lues, la pastille l'est (« 3D »). Si vos couches portent un sens (des matériaux, des étapes), écrivez-le en texte dans les couches ou à côté, à la manière des légendes de la chaussée ou du vitrage, et traduisez l'aria-label. - Contraste : « 3D » en blanc gras de 24 px sur la pastille : 3,7:1 sur
#f43f5eet 3,5:1 sur#ec4899, ce qui suffit pour un grand texte (seuil 3:1). Pour un texte plus petit dans la pastille, foncez son dégradé.
Compatibilité navigateur
CSS (perspective, transform-style: preserve-3d, translateZ, touch-action, :focus-visible) + JS d'événements pointer, aucune dépendance. Mesuré dans Chromium 151 et Firefox 153 : même inclinaison, mêmes décalages entre couches (10,9 px pour la couche magenta au bord droit), deux copies indépendantes sur une page, pile de face sous mouvement réduit, pivot au doigt (Chromium en mode tactile). Le WebKit de Playwright (26.5) aplatit toute 3D imbriquée, même sur un cube de référence : ses captures montrent la pile sans décalage entre couches, ce qui ne dit rien du vrai Safari, non vérifié.
Sans preserve-3d (ou si un parent l'aplatit), la pile tourne d'un bloc et les couches ne se décalent plus : on garde trois cadres emboîtés qui s'inclinent. Sans :focus-visible, c'est le contour de focus par défaut du navigateur qui s'affiche.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0007-root">
<div class="demo-3d">
<div class="parallax-container" tabindex="0" role="group" aria-label="…">
<div class="lp3d-scene">
<div class="lp3d-layer lp3d-layer-1"></div>
<div class="lp3d-layer lp3d-layer-2"></div>
<div class="lp3d-layer lp3d-layer-3"></div>
<div class="lp3d-layer lp3d-layer-4">3D</div>
</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 |
|---|---|---|
Inclinaison maximale (JS — MAX_TILT = 10) |
10° | Angle atteint sur les bords, quelle que soit la taille de la pile. À 6, les couches se décalent à peine ; à 15, le décalage est nettement plus marqué. |
Profondeur des couches (CSS — translateZ de .lp3d-layer-2, -3, -4) |
30, 60 et 90 px | Le décalage entre couches est proportionnel à cet écart : doublez les trois valeurs (60, 120, 180) et la couche magenta glisse environ deux fois plus au même angle. |
Taille des couches (CSS — scale(.9) et scale(.8)) |
90 % et 80 % | Sans réduction, les couches ont la même taille et se superposent comme des vitres ; avec des hauteurs différentes (inset), elles forment des bandes, comme dans la scène de la chaussée. |
Couleurs (CSS — background de .lp3d-layer-1 à -4) |
rgba(99, 102, 241, .3), rgba(139, 92, 246, .4), rgba(217, 70, 239, .5), #f43f5e → #ec4899 | Gardez de la transparence sur les couches du fond et du milieu : c'est elle qui laisse voir l'empilement. |
Pastille (CSS — .lp3d-layer-4) |
60 × 60 px, angle haut gauche | width: auto et un padding pour un libellé ; top et right pour la placer ailleurs ; inset: 0; margin: auto pour la centrer. |
Taille de la zone (CSS — .parallax-container, .demo-3d) |
200 × 140 px dans un cadre de 280 × 200 px | Agrandissez aussi .demo-3d ou retirez ses dimensions. L'angle ne change pas avec la taille. |
Perspective (CSS — perspective: 1000px de .parallax-container) |
1000px | 600px accentue la profondeur (couches avant nettement plus grandes) ; 2000px aplatit l'ensemble. |
FAQ
inset: auto, la pastille garde sa place naturelle d'élément positionné : le coin haut gauche de la pile, ce qui la fait déborder comme une étiquette collée. Pour la centrer, donnez-lui inset: 0; margin: auto ; pour la mettre en haut à droite, top: -16px; right: -14px, comme dans les scènes..lp3d-scene obligent le navigateur à aplatir son contenu : overflow: hidden, filter, et une opacity sous 1. La pile tourne alors d'un bloc. Mettez ces propriétés sur la racine ou sur les couches elles-mêmes, jamais sur .lp3d-scene. Vérifiez aussi que le .parallax-container garde sa perspective.
