Depth Card
Une carte de 220 × 160 px faite de quatre plans posés à des profondeurs différentes — anneau lumineux à −20 px, fond dégradé à 0, texte à 30 px, pastille-icône à 60 px — ; au survol, au toucher ou au clavier, elle pivote (−15° et 10°) et ses plans s'écartent encore (pastille à 80 px, anneau à −40 px) : une vue éclatée où l'icône se détache nettement du reste, en CSS 3D, 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-0022-root (fond #0a0a0f, 300 px de haut au minimum) centre .depth-card-container, qui porte perspective: 800px, puis la carte .depth-card : 220 × 160 px, transform-style: preserve-3d, transition de 0,5 s, tabindex="0". Elle contient quatre plans, chacun avec son translateZ : .depth-card-ring, un cadre de 2 px rgba(139, 92, 246, .3) qui déborde de 8 px, à −20 px ; .depth-card-bg, le fond dégradé #312e81 → #4c1d95, à 0 ; .depth-card-content, le titre et la ligne de texte, à 30 px ; .depth-card-icon, une pastille de 50 × 50 px violette avec son ombre colorée, à 60 px, dans le coin haut gauche.
Au repos, la carte est de face : la profondeur ne se voit qu'à travers la perspective. La pastille, 60 px plus près, s'affiche à 108 % (54 px mesurés) et glisse vers l'extérieur ; l'anneau, plus loin, rétrécit un peu. Au survol (ou :focus-visible), la carte prend rotateY(-15deg) rotateX(10deg) : les quatre plans tournent ensemble, et leurs écarts deviennent des décalages visibles — le texte glisse sur le fond, la pastille s'en détache. En même temps la pastille avance à 80 px et l'anneau recule à −40 px, en 0,5 s. Mesuré : 6,6 % des pixels changent au survol dans Chromium 151, 6,4 % dans Firefox 153, rendus concordants (1 % d'écart).
Tout tient à preserve-3d sur la carte : sans lui, les quatre plans seraient peints à plat dans la carte et pivoteraient comme une image. C'est pourquoi rien sur .depth-card ne doit forcer un aplatissement : pas d'overflow: hidden, de filter ni d'opacity inférieure à 1. La ligne de texte à 70 % d'opacité ne gêne pas : c'est un plan final, sans enfant en 3D. La rotation est fixe, déclenchée par le survol : la carte ne suit pas la souris, contrairement à Perspective Tilt (fx-0003).
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0022-rootgarde la carte de face et les plans à leur place ; au survol ou au focus, l'anneau s'allume (rgba(167, 139, 250, .9)). Mesuré dans Chromium et Firefox : transformation inchangée, 1,2 % de pixels changés (6,6 % sans la préférence). - Clavier : la carte a
tabindex="0"; le focus donne la vue éclatée du survol, plus un liseré#c4b5fdde 2 px décalé de 14 px (10,7:1 sur le fond). Si la carte mène à une page, faites-en un lien<a class="depth-card" href="…">. - Lecteurs d'écran : la pastille contient le caractère « ♦ », lu « losange » ou « carreau ». S'il est décoratif, ajoutez
aria-hidden="true"sur.depth-card-icon; si l'icône porte un sens (une médaille, un pictogramme), donnez-lui un texte. - Contraste : titre blanc à 11,4:1 sur
#312e81et 11:1 sur#4c1d95; ligne de texte à 70 % d'opacité à 6,1:1 au plus bas. - Toucher : au doigt, la carte touchée s'éclate (mesuré en émulation tactile Chromium et dans Firefox) et reste ouverte jusqu'au toucher suivant.
Compatibilité navigateur
CSS 3D (perspective sur le conteneur, preserve-3d sur la carte, quatre plans en translateZ), :focus-visible, aucune dépendance, aucun JavaScript. Mesuré dans Chromium 151 et Firefox 153 : même vue éclatée (1 % 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 : rendu Safari non vérifié sur un vrai Safari.
Si le navigateur aplatit la 3D, la carte pivote comme une image plate : les plans ne se séparent plus, la pastille reste collée au coin. Le texte reste lisible et la rotation visible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0022-root">
<div class="depth-card-container"> <!-- perspective: 800px -->
<div class="depth-card" tabindex="0"> <!-- preserve-3d -->
<div class="depth-card-ring"></div> <!-- −20 px -->
<div class="depth-card-bg"></div> <!-- 0 -->
<div class="depth-card-content"> <!-- 30 px -->
<h3>Depth Card</h3>
<p>Hover to explore</p>
</div>
<div class="depth-card-icon">♦</div> <!-- 60 px -->
</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 |
|---|---|---|
Profondeurs (CSS — translateZ de l'anneau, du fond, du texte, de la pastille) |
−20 ; 0 ; 30 ; 60 px | Plus les écarts sont grands, plus la vue éclatée se lit, mais au repos la pastille grossit et dérive vers le bord : vers 100 px, elle déborde nettement du coin. |
Écart au survol (CSS — translateZ de la pastille et de l'anneau sous :hover) |
80 et −40 px | Gardez la pastille plus avancée qu'au repos : c'est elle qui « se détache ». Vous pouvez aussi faire avancer le texte (ajoutez une règle pour .depth-card-content). |
Angle (CSS — rotateY(-15deg) rotateX(10deg)) |
−15° et 10° | rotateY(15deg) fait pivoter la carte vers l'autre côté ; plus l'angle grandit, plus le texte, vu de biais, se lit mal. |
Perspective (CSS — .depth-card-container) |
800 px | 500 px exagère les écarts et le grossissement de la pastille ; 1 200 px les rend discrets. |
Durée (CSS — transition: transform .5s, trois fois) |
0,5 s | Changez les trois ensemble (carte, pastille, anneau), sinon les plans arrivent à des moments différents. |
Couleurs et taille (CSS — .depth-card, .depth-card-bg, .depth-card-icon, .depth-card-ring) |
220 × 160 px ; #312e81 → #4c1d95 ; pastille #8b5cf6 → #a78bfa | L'effet tient à 320 × 230 px comme dans la première scène ; la pastille peut devenir ronde (border-radius: 50%) et porter un texte court ou une image. |
FAQ
translateZ et remplacez la rotation fixe par celle que calcule le script.overflow: hidden, un filter ou une opacity inférieure à 1 sur .depth-card forcent le navigateur à peindre ses enfants à plat, et la carte pivote comme une image. Si vous devez rogner ou flouter, faites-le sur un plan (le fond, par exemple), jamais sur la carte qui porte preserve-3d.<img> ou un SVG, comme l'éolienne de la deuxième scène. Si l'image porte un sens, donnez-lui un texte alternatif ; sinon, cachez la pastille aux lecteurs d'écran avec aria-hidden="true".
