(Version Ultra Éducative & Super Stylée)
Créer une réaction du type :
“Attends… Ils ont fait ça sans JavaScript ???”
seulement avec HTML + CSS…
🎬 1) La Magie de Base du 3D : perspective, transform, preserve-3d
La sainte trinité des effets 3D :
💠 perspective
La distance entre la « caméra (vos yeux) » et l’objet.
Valeur faible → 3D dramatique
Valeur élevée → 3D douce et subtile
💠 transform-style: preserve-3d
Permet aux enfants d’un élément parent de rester en 3D.
Si tu oublies ça ?
Désolé bébé, toute ton illusion 3D s’effondre comme un jeu de Jenga 😌
💠 transform: translateZ(), rotateX(), rotateY(), rotate3d()
Les acteurs principaux.
Ils tournent, s’élèvent, avancent, reculent — de la chorégraphie 3D pure.
💳 2) Carte 3D “Tilt” – La Carte Sexy Qui Se Plie au Survol
Parfaite pour :
✔ Portfolios
✔ Cartes produit
✔ Tout ce qui doit impressionner instantanément
Voici une version professionnelle, responsive et adaptée aux préférences “reduced-motion”.
🔧 HTML
<div class="scene">
<div class="card">
<div class="card-face front">
<h3>Super Product X</h3>
<p>Unbelievably smooth, extremely fast, incredibly cool 👑</p>
</div>
<div class="card-face back">
<p>Click to explore →</p>
</div>
</div>
</div>
🎨 CSS
:root{
--card-w: 330px;
--card-h: 420px;
--depth: 50px;
--speed: 400ms;
}
body{
background:#0f172a;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-family:Arial, sans-serif;
}
.scene{
perspective: 1100px;
}
.card{
width: var(--card-w);
height: var(--card-h);
transform-style: preserve-3d;
transition: transform var(--speed) cubic-bezier(.2,.9,.3,1);
border-radius: 16px;
cursor:pointer;
position: relative;
}
.card-face{
position:absolute;
inset:0;
border-radius:16px;
backface-visibility:hidden;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:20px;
}
.front{
background:linear-gradient(135deg,#1e3a8a,#3b82f6);
transform:translateZ(var(--depth));
}
.back{
background:linear-gradient(135deg,#0f766e,#14b8a6);
transform:rotateY(180deg) translateZ(calc(var(--depth) - 5px));
}
.scene:hover .card{
transform:rotateY(18deg) rotateX(-6deg) translateZ(15px);
}
@media (prefers-reduced-motion: reduce){
.card{
transition:none;
}
.scene:hover .card{
transform:none;
}
}
🎁 Conseils Pro
✔ Ajoute un box-shadow pour renforcer l’effet sur la face arrière
✔ Pour un tilt réaliste basé sur la souris → 5 lignes de JS suffisent (mais la version pure CSS est déjà parfaite 💅)
✔ Pour un flip au clic → utilise l’astuce du checkbox hack
🎲 3) Cube 3D en Rotation (100% HTML + CSS)
Le classique indétrônable du 3D en CSS :
Construire un cube → positionner les faces → le faire tourner.
🔧 HTML
<div class="cube-scene">
<div class="cube">
<div class="face front">FRONT</div>
<div class="face back">BACK</div>
<div class="face left">LEFT</div>
<div class="face right">RIGHT</div>
<div class="face top">TOP</div>
<div class="face bottom">BOTTOM</div>
</div>
</div>
🎨 CSS
.cube-scene{
perspective:1200px;
width:300px;
height:300px;
display:flex;
justify-content:center;
align-items:center;
}
.cube{
width:160px;
height:160px;
transform-style:preserve-3d;
animation:spin 6s linear infinite;
}
.face{
position:absolute;
width:160px;
height:160px;
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
font-weight:bold;
border-radius:12px;
backface-visibility:hidden;
}
.front { background:#38bdf8; transform:translateZ(80px); }
.back { background:#f472b6; transform:rotateY(180deg) translateZ(80px); }
.left { background:#4ade80; transform:rotateY(-90deg) translateZ(80px); }
.right { background:#fb923c; transform:rotateY(90deg) translateZ(80px); }
.top { background:#818cf8; transform:rotateX(90deg) translateZ(80px); }
.bottom { background:#facc15; transform:rotateX(-90deg) translateZ(80px); }
@keyframes spin{
0%{ transform:rotateX(0deg) rotateY(0deg); }
100%{ transform:rotateX(360deg) rotateY(360deg); }
}
💡 Conseils Pro pour le Cube
✔ Tu veux un glow doux ? → ajoute backdrop-filter
✔ Tu veux arrêter la rotation ? → stoppe l’animation au hover
✔ Tu veux un éclairage interne ? → box-shadow: inset fonctionne à merveille
🌄 4) Scène 3D Parallax – Illusion de Profondeur à Plusieurs Couches
Les designers appellent cet effet :
“OMG c’est beaucoup trop créatif 🤭”
Tu places :
arrière-plan → plan intermédiaire → avant-plan
à différentes profondeurs Z.
🔧 HTML
<div class="parallax">
<div class="layer back"></div>
<div class="layer mid"></div>
<div class="layer front"></div>
</div>
🎨 CSS
.parallax{
width:100%;
max-width:900px;
height:380px;
margin:auto;
margin-top:40px;
perspective:900px;
position:relative;
overflow:hidden;
border-radius:20px;
}
.layer{
position:absolute;
left:50%;
top:50%;
transform-style:preserve-3d;
width:130%;
height:130%;
background-size:cover;
background-position:center;
}
.back{
background-image:url('mountains.jpg');
transform:translate(-50%,-50%) translateZ(-70px) scale(1.3);
}
.mid{
background-image:url('forest.png');
transform:translate(-50%,-50%) translateZ(-30px) scale(1.1);
}
.front{
background-image:url('hero.png');
transform:translate(-50%,-50%) translateZ(20px) scale(0.95);
}
.parallax:hover .layer{
animation:parax 4s ease-in-out infinite alternate;
}
@keyframes parax{
from{ transform:translate(-50%,-50%) translateZ(-30px) rotateY(-8deg); }
to { transform:translate(-50%,-50%) translateZ(-30px) rotateY(8deg); }
}
✨ Conseils Pro pour la Scène Parallax
✔ mix-blend-mode: screen → magnifique pour les reflets
✔ filter: blur(4px) → profondeur cinématique
✔ Réduis la perspective sur mobile → la 3D y paraît plus agressive
🤖 5) Astuces 3D Avancées (Niveau Senior)
✔ Lumière simulée en CSS
background:linear-gradient(to bottom right, #fff3 0%, #0003 100%);
✔ Corriger le texte glitché
backface-visibility: hidden;
✔ Perspective plus fluide
perspective-origin: center top;
✔ Rotation 3D réaliste
transform: rotate3d(1, 1, 0, 45deg);
🌟 6) Mini-Projets 3D (Fais-le Maintenant, Brille Immédiatement)
⭐ Logo 3D rotatif
⭐ Hover cover en flip inversé
⭐ Slider 3D avec couches Z
⭐ Bouton de navigation 3D
⭐ Mini-jeu de cartes flip
🎉 CONCLUSION : Tu Es Désormais Un(e) Magicien(ne) du CSS 3D, Bébé ✨
Grâce à ce guide, tu as appris :
✔ Comment fonctionnent les scènes 3D
✔ Comment créer des cartes, des cubes et des scènes parallax
✔ Comment utiliser des astuces avancées comme un(e) pro
