Fondamentaux

Boutons Texte & Typo Formulaires Navigation & UI Chargement

Design & Visuels

Backgrounds Glass & Morphism Effets Visuels Liquid & Morphing SVG & Art

Animations & Scroll

Scroll & Parallax Transitions Hover & Interactions 3D & Profondeur Curseurs

Galerie & Plus

Cartes & Layouts Galerie & Média Data & Visualisation Atmosphère Utilitaires
Tous les effets Nouveautés Favoris Templates Blog Astuces ✨ Passer Premium

Effets 3D & Perspective

Effets 3D, profondeur spatiale, parallax et motion path.

Mis à jour le

Comment ajouter de la profondeur 3D à une page web en CSS ?

Les effets 3D donnent de la profondeur à une interface en plaçant ses éléments dans un espace virtuel. En CSS, ils reposent sur la propriété perspective, sur transform-style: preserve-3d et sur les transformations 3D comme rotateY() ou translateZ() ; WebGL prend le relais quand une scène demande un vrai éclairage ou des centaines d'objets.

Comment choisir, performances et accessibilité
  • Réservez la 3D CSS aux éléments avec lesquels on interagit : Card Flip 3D pour une carte tarif ou équipe, Perspective Tilt pour un visuel produit, 3D Carousel pour une galerie ; gardez WebGL pour les héros immersifs.
  • N'animez que transform et opacity pour que le navigateur utilise la carte graphique, évitez d'empiler beaucoup de calques 3D sur mobile et supprimez les grandes rotations pour prefers-reduced-motion.
  • Rotating Cube, Mouse Parallax Scene et Floating Shadows sont gratuits avec leur code complet ; les autres effets de la page sont inclus dans Premium.
Générateur

De la vraie 3D, pas de la perspective CSS

Les effets de cette page simulent le relief en CSS. Le générateur SVG en 3D fabrique un volume réel : votre logo est extrudé, éclairé, il porte une ombre et se prend à la main.

L'aperçu et l'image sont gratuits. Le code s'emporte avec un abonnement.

Ouvrir le générateur
Front
Back
Right
Left
Top
Bottom

Rotating Cube

Cube 3D interactif qui suit le mouvement de la souris.

CSS 3D Interactive
Voir le code source
HTML
<div class="demo-preview">
  <div class="demo-3d">
    <div class="cube-container">
      <div class="cube" id="cube">
        <div class="cube-face front">Front</div>
        <div class="cube-face back">Back</div>
        <div class="cube-face right">Right</div>
        <div class="cube-face left">Left</div>
        <div class="cube-face top">Top</div>
        <div class="cube-face bottom">Bottom</div>
      </div>
    </div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.demo-3d {
  width: 280px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cube-container {
  width: 100px;
  height: 100px;
  perspective: 600px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-30deg);
  transition: transform 0.1s ease-out;
}

.cube-face {
  position: absolute;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backface-visibility: visible;
}

.cube-face.front {
  background: rgba(99, 102, 241, 0.8);
  transform: translateZ(50px);
}

.cube-face.back {
  background: rgba(139, 92, 246, 0.8);
  transform: rotateY(180deg) translateZ(50px);
}

.cube-face.right {
  background: rgba(217, 70, 239, 0.8);
  transform: rotateY(90deg) translateZ(50px);
}

.cube-face.left {
  background: rgba(6, 182, 212, 0.8);
  transform: rotateY(-90deg) translateZ(50px);
}

.cube-face.top {
  background: rgba(16, 185, 129, 0.8);
  transform: rotateX(90deg) translateZ(50px);
}

.cube-face.bottom {
  background: rgba(244, 63, 94, 0.8);
  transform: rotateX(-90deg) translateZ(50px);
}
JavaScript
(function() {
  // 1. Rotating Cube - Mouse interaction
  const cube = document.getElementById('cube');

  const cubeContainer = cube.parentElement;

  cubeContainer.addEventListener('mousemove', (e) => {
    const rect = cubeContainer.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    const rotateX = -y / 5;
    const rotateY = x / 5;
    cube.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  });

  cubeContainer.addEventListener('mouseleave', () => {
    cube.style.transform = 'rotateX(-20deg) rotateY(-30deg)';
  });
})();

Card Flip 3D

Retournement complet de carte avec effet 3D réaliste.

CSS 3D Hover

Perspective Tilt

Élément qui s'incline en 3D selon la position du curseur.

JS 3D Mouse

Folding Panel

Panneau qui se déplie comme du papier au survol.

CSS 3D Fold

3D Button Press

Bouton avec effet de pression 3D réaliste.

CSS 3D Button

Layered Parallax 3D

Couches multiples avec effet de profondeur 3D.

JS 3D Parallax

Rotating Text

Texte avec rotation 3D animée en continu.

CSS 3D Text

3D Menu Stack

Menu empile avec effet de profondeur au survol.

CSS 3D Menu

Isometric Grid

Grille isométrique avec cubes 3D interactifs.

CSS 3D Isometric

Cube Auto-Rotation

Cube 3D avec rotation automatique continue.

CSS 3D Auto

Parallax Depth Layers

Couches empilées avec effet de profondeur 3D.

CSS 3D Depth

Fold Effect Card

Carte qui se plie vers l'intérieur au survol.

CSS 3D Fold

Door Open Effect

Porte 3D qui s'ouvre pour révéler le contenu.

CSS 3D Door

Page Turn Effect

Effet de pages qui se tournent au survol.

CSS 3D Book

Prism Rotation

Prisme hexagonal avec rotation automatique.

CSS 3D Prism

Floating Elements 3D

Éléments flottants avec rotation 3D animée.

CSS 3D Float

3D Button Press V2

Bouton 3D avec effet de pression perspective.

CSS 3D Button

Shadow Perspective

Carte avec ombre 3D réaliste qui réagit au survol.

CSS 3D Shadow

Mouse Parallax Scene

Scène multi-couches (étoiles, lune, montagnes, arbres) réagissant au curseur à des vitesses différentes.

JS Mouse Parallax
Voir le code source
HTML
<div class="demo-preview">
  <div class="parallax-scene" data-parallax-scene>
    <div class="parallax-layer" data-depth="0.1">
      <div class="parallax-stars">
        <span class="parallax-star" style="top:10%;left:15%"></span>
        <span class="parallax-star" style="top:20%;left:75%"></span>
        <span class="parallax-star" style="top:35%;left:45%"></span>
        <span class="parallax-star" style="top:15%;left:90%"></span>
        <span class="parallax-star" style="top:50%;left:25%"></span>
        <span class="parallax-star" style="top:8%;left:55%"></span>
        <span class="parallax-star" style="top:42%;left:80%"></span>
        <span class="parallax-star" style="top:28%;left:10%"></span>
      </div>
    </div>
    <div class="parallax-layer" data-depth="0.25" style="display:flex;align-items:flex-start;justify-content:flex-end;padding:30px 60px 0 0;">
      <div class="parallax-moon"></div>
    </div>
    <div class="parallax-layer" data-depth="0.4">
      <div class="parallax-mountains">
        <div class="parallax-mountain mountain-1"></div>
        <div class="parallax-mountain mountain-2"></div>
        <div class="parallax-mountain mountain-3"></div>
        <div class="parallax-mountain mountain-4"></div>
      </div>
    </div>
    <div class="parallax-layer" data-depth="0.6">
      <div class="parallax-trees">
        <div class="parallax-tree tree-sm"></div>
        <div class="parallax-tree tree-lg"></div>
        <div class="parallax-tree tree-md"></div>
        <div class="parallax-tree tree-sm"></div>
        <div class="parallax-tree tree-lg"></div>
        <div class="parallax-tree tree-md"></div>
        <div class="parallax-tree tree-sm"></div>
      </div>
    </div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.parallax-scene {
  width: 100%;
  height: 250px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #0a0a2e 0%, #1a1a4e 50%, #2a1a3e 100%);
  cursor: crosshair;
}

.parallax-layer {
  position: absolute;
  inset: -30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.parallax-stars {
  width: 100%;
  height: 100%;
}

.parallax-star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  opacity: 0.6;
}

.parallax-moon {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle at 35% 35%, #fef3c7, #fbbf24);
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.4), 0 0 80px rgba(251, 191, 36, 0.2);
}

.parallax-mountains {
  position: absolute;
  bottom: -30px;
  width: 120%;
  left: -10%;
}

.parallax-mountain {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.mountain-1 {
  left: 5%;
  border-width: 0 80px 120px 80px;
  border-color: transparent transparent #1e1b4b transparent;
}

.mountain-2 {
  left: 25%;
  border-width: 0 100px 100px 100px;
  border-color: transparent transparent #2e1065 transparent;
}

.mountain-3 {
  left: 55%;
  border-width: 0 90px 130px 90px;
  border-color: transparent transparent #1e1b4b transparent;
}

.mountain-4 {
  left: 75%;
  border-width: 0 70px 90px 70px;
  border-color: transparent transparent #2e1065 transparent;
}

.parallax-trees {
  position: absolute;
  bottom: -30px;
  width: 120%;
  left: -10%;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.parallax-tree {
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #064e3b transparent;
}

.tree-sm {
  border-width: 0 12px 40px 12px;
}

.tree-md {
  border-width: 0 16px 55px 16px;
}

.tree-lg {
  border-width: 0 20px 70px 20px;
}
JavaScript
(function() {
  // ========== SPATIAL DEPTH ==========
  // ==========================================
  // 1. Mouse Parallax Scene
  // ==========================================
  document.querySelectorAll('[data-parallax-scene]').forEach(function(scene) {
    var layers = scene.querySelectorAll('.parallax-layer');
    scene.addEventListener('mousemove', function(e) {
      var rect = scene.getBoundingClientRect();
      var centerX = rect.width / 2;
      var centerY = rect.height / 2;
      var mouseX = e.clientX - rect.left - centerX;
      var mouseY = e.clientY - rect.top - centerY;
      layers.forEach(function(layer) {
        var depth = parseFloat(layer.getAttribute('data-depth')) || 0.1;
        var moveX = mouseX * depth * 0.5;
        var moveY = mouseY * depth * 0.5;
        layer.style.transform = 'translate(' + moveX + 'px, ' + moveY + 'px)';
      });
    });
    scene.addEventListener('mouseleave', function() {
      layers.forEach(function(layer) {
        layer.style.transform = 'translate(0, 0)';
      });
    });
  });
})();

Depth Card

Carte avec éléments superposes (fond, texte, icône) se séparant en 3D au survol avec translate3d.

CSS 3D Hover

Floating Elements

Éléments UI flottant et oscillant comme en apesanteur avec des durées d'animation différentes.

CSS Animation Float

Perspective Scroll

Contenu a différentes profondeurs Z créant un effet de vol spatial avec CSS perspective et translateZ.

CSS Perspective 3D

Layered Paper

Pile de feuilles de papier avec ombres réalistes et légère rotation, qui se déploient au survol.

CSS Hover Shadow

Isometric Grid

Grille isométrique interactive ou les blocs se lèvent et s'abaissent selon la proximité du curseur.

JS Mouse Isometric

Depth of Field

Avant/arrière-plan avec flou qui change de focus au survol, simulant la profondeur de champ.

CSS Blur Hover

3D Room

Contenu place sur le sol et les murs d'une pièce CSS perspective qui tourne au glissement.

JS 3D Drag
♦
★
♥

Floating Shadows

Éléments avec ombres se déplaçant indépendamment comme si une source lumineuse dynamique bougeait.

JS Mouse Shadow
Voir le code source
HTML
<div class="demo-preview">
  <div class="float-shadow-container" data-float-shadow>
    <div class="float-shadow-el">
      <div class="float-shadow-shape fs-shape-1">&#9830;</div>
      <div class="float-shadow-shadow"></div>
    </div>
    <div class="float-shadow-el">
      <div class="float-shadow-shape fs-shape-2">&#9733;</div>
      <div class="float-shadow-shadow"></div>
    </div>
    <div class="float-shadow-el">
      <div class="float-shadow-shape fs-shape-3">&#9829;</div>
      <div class="float-shadow-shadow"></div>
    </div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.float-shadow-container {
  width: 100%;
  height: 250px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  cursor: crosshair;
}

.float-shadow-el {
  position: relative;
  transition: transform 0.3s ease;
}

.float-shadow-shape {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  position: relative;
  z-index: 2;
}

.fs-shape-1 {
  background: linear-gradient(135deg, #6366f1, #818cf8);
}

.fs-shape-2 {
  background: linear-gradient(135deg, #ec4899, #f472b6);
  border-radius: 50%;
}

.fs-shape-3 {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.float-shadow-shadow {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 10px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 70%);
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 1;
}
JavaScript
(function() {
  // ==========================================
  // 9. Floating Shadows - Dynamic light source
  // ==========================================
  document.querySelectorAll('[data-float-shadow]').forEach(function(container) {
    var elements = container.querySelectorAll('.float-shadow-el');
    container.addEventListener('mousemove', function(e) {
      var rect = container.getBoundingClientRect();
      var mx = e.clientX - rect.left;
      var my = e.clientY - rect.top;
      var centerX = rect.width / 2;
      var centerY = rect.height / 2;
      var lightX = (mx - centerX) / centerX;
      var lightY = (my - centerY) / centerY;

      elements.forEach(function(el) {
        var shape = el.querySelector('.float-shadow-shape');
        var shadow = el.querySelector('.float-shadow-shadow');
        // Move shadow opposite to light direction
        var shadowX = -lightX * 15;
        var shadowY = lightY * 5 + 5;
        var shadowScale = 1 + Math.abs(lightY) * 0.3;
        shadow.style.transform = 'translateX(calc(-50% + ' + shadowX + 'px)) scaleX(' + shadowScale + ')';
        shadow.style.opacity = 0.6 - Math.abs(lightY) * 0.2;
        // Lift shape slightly toward light
        shape.style.transform = 'translate(' + (lightX * 3) + 'px, ' + (-Math.abs(lightY) * 5) + 'px)';
        // Dynamic box shadow on shape
        shape.style.boxShadow = ((-lightX * 8)) + 'px ' + ((-lightY * 8 + 4)) + 'px 20px rgba(0,0,0,0.3)';
      });
    });
    container.addEventListener('mouseleave', function() {
      elements.forEach(function(el) {
        var shape = el.querySelector('.float-shadow-shape');
        var shadow = el.querySelector('.float-shadow-shadow');
        shadow.style.transform = 'translateX(-50%)';
        shadow.style.opacity = '0.35';
        shape.style.transform = 'translate(0, 0)';
        shape.style.boxShadow = '';
      });
    });
  });
})();

Orbit Circle

Éléments orbitant autour d'un point central avec offset-path: circle(). Vitesses et directions variées.

CSS offset-path Orbit
Voir le code source
HTML
<div class="demo-preview">
  <div class="mp-orbit-scene">
    <div class="mp-orbit-ring mp-orbit-ring--1"></div>
    <div class="mp-orbit-ring mp-orbit-ring--2"></div>
    <div class="mp-orbit-center"></div>
    <div class="mp-orbit-dot mp-orbit-dot--1"></div>
    <div class="mp-orbit-dot mp-orbit-dot--2"></div>
    <div class="mp-orbit-dot mp-orbit-dot--3"></div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.mp-orbit-scene {
  width: 260px;
  height: 260px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-orbit-center {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  z-index: 2;
}

.mp-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.mp-orbit-ring--1 {
  width: 140px;
  height: 140px;
}

.mp-orbit-ring--2 {
  width: 210px;
  height: 210px;
}

.mp-orbit-dot {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
}

.mp-orbit-dot--1 {
  width: 16px;
  height: 16px;
  background: #ec4899;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.5);
  offset-path: circle(70px);
  animation: mpOrbit 4s linear infinite;
  margin: -8px 0 0 -8px;
}

.mp-orbit-dot--2 {
  width: 12px;
  height: 12px;
  background: #06b6d4;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
  offset-path: circle(105px);
  animation: mpOrbit 7s linear infinite reverse;
  margin: -6px 0 0 -6px;
}

.mp-orbit-dot--3 {
  width: 8px;
  height: 8px;
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  offset-path: circle(105px);
  animation: mpOrbit 5s linear infinite;
  margin: -4px 0 0 -4px;
}

@keyframes mpOrbit {
  to {
    offset-distance: 100%;
  }
}
JavaScript
/* CSS pur — aucun JavaScript requis */

SVG Path Follow

Point lumineux suivant une courbe SVG avec traînée fantôme en écho décalé dans le temps.

CSS SVG Trail

Bezier Curve

Balle suivant une courbe de Bézier cubique avec points de contrôle visibles et ombre au sol.

CSS Bezier Animation

Infinity Loop

Point suivant un chemin en forme de lemniscate (∞) avec halo lumineux en traînée.

CSS Path Infinity

Spiral Path

Point parcourant une spirale qui s'élargit vers l'extérieur via un chemin SVG complexe.

CSS Spiral SVG

Bounce Path

Balle suivant une trajectoire de rebond avec des arcs qui diminuent progressivement.

CSS Bounce Physics

Wave Path

Trois points de tailles et couleurs différentes suivant une sinusoïde avec décalages temporels.

CSS Wave Stagger

Multi Orbit

Système solaire miniature avec 5 planètes sur 3 orbites à des vitesses et distances variées.

CSS Orbit System

Path Drawing

Chemin SVG qui se dessine avec stroke-dashoffset pendant qu'un point suit la même trajectoire.

CSS SVG Draw

Rollercoaster

Wagon suivant un parcours de montagnes russes avec offset-rotate: auto pour l'orientation naturelle.

CSS offset-rotate Path

AR/VR & WebXR

📊Stats
⚙Settings
👤Profile

Spatial UI Panels

Panneaux UI flottants disposes en arc dans un espace 3D avec effet de parallaxe.

CSS 3D Perspective UI
Voir le code source
HTML
<div class="demo-preview">
  <div class="xr-spatial-panels">
    <div class="xr-panel"><span class="xr-panel-icon">&#128202;</span>Stats</div>
    <div class="xr-panel"><span class="xr-panel-icon">&#9881;</span>Settings</div>
    <div class="xr-panel"><span class="xr-panel-icon">&#128100;</span>Profile</div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.demo-preview {
  --text-secondary: #a1a1aa;
}

.xr-spatial-panels {
  width: 100%;
  height: 100%;
  perspective: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.xr-panel {
  width: 80px;
  height: 100px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-align: center;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.xr-panel:nth-child(1) {
  transform: rotateY(-25deg) translateZ(30px);
}

.xr-panel:nth-child(2) {
  transform: rotateY(0deg) translateZ(50px);
}

.xr-panel:nth-child(3) {
  transform: rotateY(25deg) translateZ(30px);
}

.xr-panel:hover {
  transform: rotateY(0deg) translateZ(70px) scale(1.1);
}

.xr-panel-icon {
  font-size: 1.5rem;
  margin-bottom: 6px;
}
JavaScript
/* CSS pur — aucun JavaScript requis */

360 Viewer

Panorama interactif avec drag-to-rotate pour une vue immersive à 360 degrés.

JS Drag Panorama

AR Object Placer

Simulation de placement d'objet 3D sur une surface avec grille de détection.

CSS AR Placement

Holographic Display

Affichage holographique avec scanline, reflets prismatiques et pulsation lumineuse.

CSS Hologramme Animation
Voir le code source
HTML
<div class="demo-preview">
  <div class="xr-holo-display">
    <div class="xr-holo-box">
      <div class="xr-holo-scanline"></div>
      <div class="xr-holo-prism"></div>
    </div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

.xr-holo-display {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.xr-holo-box {
  width: 120px;
  height: 120px;
  position: relative;
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.05);
  animation: xrHoloPulse 3s ease-in-out infinite;
}

.xr-holo-scanline {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.6), transparent);
  animation: xrScanline 2s linear infinite;
}

.xr-holo-prism {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(99, 102, 241, 0.1) 45%, rgba(168, 85, 247, 0.1) 55%, transparent 70%);
  animation: xrPrism 4s linear infinite;
}

@keyframes xrScanline {
  from {
    top: 0;
  }

  to {
    top: 100%;
  }
}

@keyframes xrHoloPulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
  }

  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.4), inset 0 0 20px rgba(99, 102, 241, 0.1);
  }
}

@keyframes xrPrism {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
JavaScript
/* CSS pur — aucun JavaScript requis */

Spatial Audio Dir

Indicateur directionnel audio 3D avec ondes concentriques et source sonore mobile.

CSS Audio Spatial

Portal Effect

Portail vers une autre dimension : anneau en rotation et cœur en pulsation lumineuse, semé de particules.

CSS JS Portal
Select
Grab
Point

Hand Tracking UI

Interface réactive aux gestes simulée avec un curseur personnalisé suivant la souris.

JS Gestes UI
Voir le code source
HTML
<div class="demo-preview">
  <div class="xr-hand-tracking" id="xrHandTracking">
    <div class="xr-hand-btn">Select</div>
    <div class="xr-hand-btn">Grab</div>
    <div class="xr-hand-btn">Point</div>
    <div class="xr-hand-cursor" id="xrHandCursor"></div>
  </div>
</div>
CSS
.demo-preview,
.demo-preview *,
.demo-preview *::before,
.demo-preview *::after {
  box-sizing: border-box
}

.demo-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  background: rgb(26, 26, 36);
  color: rgb(255, 255, 255);
  font-family: sans-serif;
}

/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.demo-preview {
  --text-secondary: #a1a1aa;
}

.xr-hand-tracking {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.xr-hand-cursor {
  width: 24px;
  height: 24px;
  border: 2px solid #6366f1;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  transition: transform 0.1s ease;
}

.xr-hand-cursor::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.3);
}

.xr-hand-btn {
  padding: 10px 20px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 8px;
}

.xr-hand-btn:hover {
  background: rgba(99, 102, 241, 0.3);
  transform: scale(1.05);
}

.xr-hand-btn.active {
  background: rgba(99, 102, 241, 0.4);
  border-color: #6366f1;
}
JavaScript
(function() {
  /* Suivi main XR (fx-0048) restauré depuis .bak-strip — 12/08/2026 */
  // Hand Tracking UI — le curseur suit la souris (fx-0048)
  (function() {
    var container = document.getElementById('xrHandTracking');
    var cursor = document.getElementById('xrHandCursor');
    if (!container || !cursor) return;

    container.addEventListener('mousemove', function(e) {
      var rect = container.getBoundingClientRect();
      cursor.style.left = (e.clientX - rect.left - 12) + 'px';
      cursor.style.top = (e.clientY - rect.top - 12) + 'px';
    });

    container.querySelectorAll('.xr-hand-btn').forEach(function(btn) {
      btn.addEventListener('click', function() {
        container.querySelectorAll('.xr-hand-btn').forEach(function(b) {
          b.classList.remove('active');
        });
        btn.classList.add('active');
        cursor.style.transform = 'scale(0.8)';
        setTimeout(function() {
          cursor.style.transform = 'scale(1)';
        }, 200);
      });
    });
  })();
})();

Immersive Depth Scroll

Layers en profondeur Z qui réagissent au mouvement de souris pour un effet de parallaxe immersif.

CSS 3D Parallaxe Depth

XR Environment

Scène immersive complète avec skybox étoilé, objets 3D flottants et sol en grille perspective.

CSS JS Environnement

3D Product Showcase

Vrai modèle 3D interactif (.glb) : rotation 360° au drag, rotation automatique, ombres réalistes et vue en réalité augmentée sur mobile. Le packshot premium qui fait vendre.

💡 Idéal pour : page produit, édition limitée, configurateur, hero e-commerce, fiche premium, Black Friday.

model-viewer .glb / AR Produit Premium

Questions fréquentes

Comment créer une carte retournable (flip) en CSS ? +

Utilisez un conteneur avec perspective:1000px, une carte interne avec transform-style:preserve-3d et transition. La face arrière a backface-visibility:hidden et rotateY(180deg). Au hover, la carte tourne de 180deg.

Quelle est la différence entre perspective et transform 3D ? +

perspective définit la distance entre le spectateur et l'élément — elle se met sur le PARENT. Les transforms 3D (rotateX, rotateY, translateZ) déforment l'élément lui-même. Plus la perspective est petite, plus l'effet est prononce.

Comment créer un carrousel 3D en CSS ? +

Placez les items en cercle avec rotateY et translateZ dans un conteneur avec transform-style:preserve-3d. Chaque item a rotateY(i * 360/n deg) translateZ(rayon). Animez la rotation du conteneur pour faire défiler.

WebGL est-il nécessaire pour des effets 3D web ? +

Non pour la majorité des effets : CSS perspective + transforms suffisent pour les cartes, carrousels et parallax. WebGL (via Three.js) est nécessaire uniquement pour des scènes 3D complexes : modèles, textures, lumières, physique.

Les effets 3D CSS sont-ils performants ? +

Oui. Les transforms 3D sont traitées par le GPU. Évitez de combiner transform avec filter sur le même élément. Limitez le nombre d'éléments avec preserve-3d car chaque plan 3D consomme de la mémoire GPU.

Catégories similaires

📜

Scroll & Parallax

30 effets

 🎬

Transitions

50 effets

 ✨

Atmosphère

50 effets