Holographic Card 3D
Carte holographique CSS pur : tilt 3D au survol, irisation arc-en-ciel via conic-gradient et mix-blend-mode — quatre couleurs réglables, zéro JavaScript.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Cartes comprend 41 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'irisation repose entièrement sur le pseudo-élément ::after. Il superpose deux couches : un repeating-linear-gradient(0deg, …) trace des lignes de balayage horizontales (1 px blanc à 7 % d'opacité tous les 3 px, imitant le grain du feuil holographique) et un conic-gradient(from 0deg at 50% 50%, c1, c2, c3, c4, c1) cycling les quatre couleurs configurables (--holo-c1 à --holo-c4). Les deux couches s'appliquent en mix-blend-mode: overlay sur le fond sombre de la carte — opacité 0 au repos, elle monte à calc(--holo-intensity * 0.9) sur :hover.
Le tilt 3D est géré en CSS seul. .holo-stage établit une perspective: 1100px. Sur :hover, la carte applique rotateX(calc(var(--holo-tilt)*-1)) rotateY(var(--holo-tilt)) — un basculement symétrique de ±--holo-tilt (12° par défaut) en avant et sur le côté. La transition cubic-bezier(.2, .8, .2, 1) donne un rebond léger. will-change: transform délègue le compositing au GPU.
Le contenu (.holo-content) utilise translateZ(40px) avec transform-style: preserve-3d sur la carte parente : il paraît visuellement levé devant la surface irisée, amplifiant l'impression de profondeur et de relief.
La puce EMV dorée (.holo-chip) est un linear-gradient(135deg, #f4d98b, #b9882f 60%, #f4d98b) avec des ombres intérieure et extérieure simulant le métal brossé. Note : le CSS référence animation: holo-shift et mix-blend-mode: color-dodge sur ::before, mais les @keyframes holo-shift et l'image de fond correspondante ne figurent pas dans le code exporté — l'animation de déplacement est inactive ; le rendu holographique complet repose sur la transition :hover de ::after.
Accessibilité
- prefers-reduced-motion absent : aucune media query ne désactive le tilt ou la transition. Pour les utilisateurs sensibles au mouvement, ajouter
@media (prefers-reduced-motion: reduce) { .holo-card { transition: none } .holo-card::after { transition: none } }. .holo-cardportetabindex="0"— la carte est focusable au clavier. Aucun style:focus-visiblen'est défini : ajouter.holo-card:focus-visible { outline: 2px solid var(--holo-c3); outline-offset: 4px; }pour la conformité clavier.- Aucun
roleniaria-labelsur la carte. Pour un usage sémantique, ajouterrole="img"etaria-labeldécrivant le contenu (ex. « Carte membre holographique Effect.Labs »). - Contraste du texte : blanc (
#fff) et gris clair (rgba(255,255,255,0.6)) sur fond sombre (#12121f) — ratio texte principal ≥ 15:1, WCAG AAA. - Aucun JavaScript actif — pas de piège de clavier, pas de comportement interactif au-delà du survol CSS.
Compatibilité navigateur
Le facteur limitant est la conjonction de conic-gradient (Chrome 69+, Firefox 83+, Safari 12.1+) et de aspect-ratio (Chrome 88+, Firefox 89+, Safari 15+).
Si conic-gradient n'est pas supporté, ::after n'affiche rien (fond transparent) ; la carte reste fonctionnelle avec son fond sombre et la puce dorée. Sur mobile, l'absence de :hover fige la carte dans son état de repos — les couches irisées restent invisibles.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="holo-stage">
<article class="holo-card" tabindex="0">
<div class="holo-content">
<div class="holo-chip"></div>
<div>
<h3>VOTRE TITRE</h3>
<p class="holo-sub">Sous-titre édition</p>
</div>
<div class="holo-num">0000 · 0000 · LABEL</div>
</div>
</article>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| --holo-c1 à --holo-c4 | #ff2d75, #2de2ff, #b06bff, #ffe14d | Les quatre couleurs du conic-gradient irisé (rose, cyan, violet, jaune). Redéfinissez-les sur .holo-card ou en style inline pour personnaliser chaque carte indépendamment. |
| --holo-intensity | 0.55 | Opacité maximale des couches irisées (::before et ::after). De 0.3 (subtil) à 0.85 (très prononcé). Dépasse 0.8 uniquement sur fond foncé. |
| --holo-tilt | 12deg | Angle de rotation 3D au survol (rotateX et rotateY). De 6deg (délicat) à 22deg (effet trading card exagéré). |
| --holo-speed | 6s | Durée du cycle d'animation holo-shift sur ::before. Sans effet dans le code exporté (keyframes manquants) — utile si vous ajoutez les @keyframes manuellement. |
| width sur .holo-card | 300px | Largeur de la carte. La hauteur suit automatiquement via aspect-ratio: 5/7 (420 px à 300 px). Réduisez à 160-220 px pour les vignettes de catalogue. |
| transition sur .holo-card | .55s cubic-bezier(.2,.8,.2,1) | Durée et courbe du tilt. Raccourcissez à .25s ease pour une réponse vive ; allongez à .9s pour un basculement cinématique. |
FAQ
.holo-card est autonome via ses propriétés CSS custom. Redéfinissez les variables en style inline ou via une classe : <article class="holo-card" style="--holo-c1:#7c3aed;--holo-c2:#06b6d4">. Aucun JavaScript ni identifiant unique requis — les instances ne se partagent aucun état.:hover CSS ne se déclenche pas de façon persistante. La carte reste dans son état de repos (fond sombre, puce dorée, texte). Pour activer l'effet au toucher, ajoutez un écouteur JS : card.addEventListener('touchstart', () => card.classList.toggle('is-active')) et définissez .holo-card.is-active avec les mêmes règles CSS que .holo-card:hover.animation: holo-shift var(--holo-speed) linear infinite sur ::before, mais les @keyframes holo-shift et le background-image de ::before ne figurent pas dans le JSON exporté. Pour l'activer, ajoutez à votre feuille de style : un background-image: conic-gradient(...) sur .holo-card::before et @keyframes holo-shift { from { background-position: 0% 50% } to { background-position: 100% 50% } }.
