OUJOOD.COM
Quelle différence entre la 2D et la 3D en CSS3 ?
En 2D classique, deux axes suffisent : l'axe X (positif vers la droite, négatif vers la gauche) et l'axe Y (positif vers le bas, négatif vers le haut).
Avec les transformations 3D CSS3, un troisième axe apparaît : l'axe Z, positif vers l'utilisateur (sortant de l'écran), négatif en s'éloignant. C'est lui qui produit l'illusion de profondeur.
La propriété perspective en CSS3
La propriété perspective représente la distance virtuelle entre l'œil de l'observateur et le plan de l'écran. Sans elle, les rotations sur l'axe Z s'appliquent mais ne produisent aucun effet visuel convaincant — tout reste plat.
La valeur, en pixels, change directement l'intensité de l'effet :
Une valeur élevée (ex. : 2000px) simule un observateur loin de l'écran — l'effet 3D est léger, presque imperceptible.
Une valeur faible (ex. : 200px) simule un observateur très proche — la déformation est forte, le raccourci perspectif accentué.
Deux façons d'appliquer la perspective CSS3
Il existe deux syntaxes pour déclarer une perspective, et leur comportement diffère selon qu'on transforme un seul élément ou plusieurs.
Méthode 1 : perspective() comme fonction de transform
On intègre perspective() directement dans la valeur de transform. La perspective s'applique à cet élément uniquement, avec son propre point de fuite :
/* Perspective intégrée dans transform : point de fuite propre à cet élément */
transform: perspective(600px) rotateY(45deg);
Méthode 2 : perspective comme propriété sur le parent
On déclare perspective sur l'élément parent. Tous ses enfants partagent alors le même espace 3D et le même point de fuite — nécessaire pour un rendu cohérent quand plusieurs éléments sont transformés ensemble :
/* Perspective sur le parent : espace 3D partagé par tous les enfants */
.conteneur-parent {
perspective: 600px;
}
Compatibilité 2026 : Chrome, Firefox, Edge, Safari et Opera supportent perspective sans préfixe. Le préfixe -webkit- reste utile pour Safari ≤ 8 uniquement. Les préfixes -moz- et -o- sont obsolètes.
Comparaison des deux formes de perspective
Sur un seul élément, les deux méthodes donnent le même résultat visuel. La différence se voit dès qu'on transforme plusieurs éléments : avec la forme fonction, chaque élément a son propre point de fuite et les perspectives ne s'alignent pas. Avec la propriété sur le parent, tous les enfants partagent un point de fuite commun :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Perspective CSS3 : comparaison des deux méthodes</title>
<style>
/* Conteneur générique pour chaque démonstration */
.conteneur {
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 0 auto 40px;
}
.box {
width: 100%;
height: 100%;
}
/* Boîte 1 : perspective intégrée dans transform */
#boite-methode .box {
background-color: #ff0;
-webkit-transform: perspective(600px) rotateY(45deg);
transform: perspective(600px) rotateY(45deg);
}
/* Boîte 2 : perspective sur le parent, la rotation seule suffit */
#boite-propriete {
-webkit-perspective: 600px;
perspective: 600px;
}
#boite-propriete .box {
background-color: #0ff;
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
h2 { margin: 10px; padding: 10px; }
</style>
</head>
<body>
<h1>Comparaison des deux formes de perspective CSS3</h1>
<section id="boite-methode" class="conteneur">
<div class="box"><h2>Méthode perspective()</h2></div>
</section>
<section id="boite-propriete" class="conteneur">
<div class="box"><h2>Propriété perspective</h2></div>
</section>
</body>
</html>
Bonne pratique : pour tout groupe d'éléments transformés en 3D (galeries, cartes retournables, cubes CSS), appliquez perspective sur le conteneur parent.
Point de fuite partagé vs individuel
Cet exemple rend la différence visible sur une grille d'éléments. Les carrés rouges ont chacun leur propre perspective — ils semblent désalignés. Les carrés bleus héritent de la perspective du parent et forment une surface cohérente :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Point de fuite CSS3 : individuel vs partagé</title>
<style>
.container {
width: 300px;
height: 200px;
border: 1px solid #CCC;
margin: 0 auto 40px;
}
.container figure {
display: block;
width: 50px;
height: 50px;
float: left;
margin: 5px;
}
/* Perspective sur chaque figure : points de fuite multiples, désalignement */
#section-rouge figure {
background: #fd5555;
-webkit-transform: perspective(200px) rotateY(45deg);
transform: perspective(200px) rotateY(45deg);
}
/* Perspective sur le parent : point de fuite unique, alignement cohérent */
#section-bleue {
-webkit-perspective: 200px;
perspective: 200px;
}
#section-bleue figure {
background: #0099ff;
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
</style>
</head>
<body>
<h1>Perspective individuelle vs perspective partagée</h1>
<section id="section-rouge" class="container">
<h3>Méthode sur chaque enfant (points de fuite multiples)</h3>
<figure></figure><figure></figure><figure></figure>
<figure></figure><figure></figure><figure></figure>
<figure></figure><figure></figure><figure></figure>
<figure></figure>
</section>
<section id="section-bleue" class="container">
<h3>Propriété sur le parent (point de fuite unique et partagé)</h3>
<figure></figure><figure></figure><figure></figure>
<figure></figure><figure></figure><figure></figure>
<figure></figure><figure></figure><figure></figure>
<figure></figure>
</section>
</body>
</html>
Compatibilité navigateurs en 2026
Chrome, Firefox, Edge, Safari et Opera supportent les transformations 3D CSS sans préfixe. Internet Explorer est abandonné depuis juin 2022. Le préfixe -webkit- ne couvre plus que Safari sur iOS ≤ 8 et quelques environnements WebKit embarqués anciens. Pour tout nouveau projet, la syntaxe standard suffit.
La fonction rotateX() : rotation autour de l'axe horizontal
rotateX() fait pivoter un élément autour de son axe horizontal. Un angle positif bascule le haut de l'élément vers l'arrière ; un angle négatif bascule le bas. On l'utilise pour des effets de dépliage ou des panneaux qui s'ouvrent vers le haut :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>CSS3 rotateX() : rotation 3D autour de l'axe X</title>
<style>
div {
width: 100px;
height: 75px;
background-color: #ff0;
border: 1px solid black;
margin: 20px;
padding: 5px;
}
/* rotateX(45deg) : le haut de l'élément part en profondeur de 45 degrés */
#div-rotatex {
-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div>Div normal sans transformation.</div>
<div id="div-rotatex">Div avec rotateX(45deg).</div>
</body>
</html>
La fonction rotateY() : rotation autour de l'axe vertical
rotateY() fait pivoter un élément autour de son axe vertical. Un angle positif envoie le côté droit en profondeur. Combinée à perspective et transition, elle permet de retourner une carte au survol sans JavaScript :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>CSS3 rotateY() : rotation 3D autour de l'axe Y</title>
<style>
div {
width: 100px;
height: 75px;
background-color: #ff0;
border: 1px solid black;
margin: 20px;
padding: 5px;
}
/* rotateY(45deg) : le côté droit part en profondeur
Sans perspective sur le parent, l'effet reste orthographique */
#div-rotatey {
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
</style>
</head>
<body>
<div>Div normal sans transformation.</div>
<div id="div-rotatey">Div avec rotateY(45deg).</div>
</body>
</html>
Flip card CSS3 pur avec rotateY et perspective
Une carte retournable au survol, entièrement en CSS. backface-visibility: hidden masque chaque face quand elle est dos à l'écran. transform-style: preserve-3d maintient les deux faces dans le même espace 3D :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Flip Card CSS3 : rotateY + perspective + transition</title>
<style>
/* Le parent définit la perspective partagée
preserve-3d permet aux enfants d'exister dans l'espace 3D */
.flip-conteneur {
width: 200px;
height: 140px;
perspective: 800px;
margin: 30px auto;
}
.flip-carte {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
/* Le retournement s'anime en 0.6 secondes */
transition: transform 0.6s ease;
}
/* Au survol, la carte pivote de 180 degrés */
.flip-conteneur:hover .flip-carte {
transform: rotateY(180deg);
}
.face, .dos {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-family: Arial, sans-serif;
font-weight: bold;
}
.face {
background: #4A90D9;
color: white;
}
/* Le dos commence retourné à 180deg — il revient à 0 lors du flip */
.dos {
background: #E67E22;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="flip-conteneur">
<div class="flip-carte">
<div class="face">Face avant</div>
<div class="dos">Face arrière</div>
</div>
</div>
</body>
</html>
Référence complète : propriétés CSS3 transform
| Propriété | Description |
|---|---|
| transform | Applique une ou plusieurs transformations 2D ou 3D à un élément (rotate, scale, translate, skew, matrix) |
| transform-origin | Point d'ancrage des transformations. Par défaut : centre de l'élément (50% 50%) |
| transform-style | preserve-3d : les enfants sont positionnés dans l'espace 3D. flat (défaut) : les enfants sont aplatis dans le plan 2D |
| perspective | Distance entre l'observateur et le plan Z=0. Valeur recommandée : 400px à 1200px selon l'effet souhaité |
| backface-visibility | hidden : masque la face arrière lors d'un retournement (indispensable pour les flip cards). visible (défaut) |
Référence complète : fonctions CSS3 Transform 3D
| Fonction | Description |
|---|---|
| matrix3d(n×16) | Transformation 3D via une matrice 4×4. Réservé aux cas où plusieurs transformations doivent être combinées en une seule opération |
| translate3d(x,y,z) | Déplace l'élément sur les trois axes. Favorise les animations GPU accélérées |
| translateX(x) | Translation horizontale uniquement |
| translateY(y) | Translation verticale uniquement |
| translateZ(z) | Déplacement en profondeur : rapproche ou éloigne l'élément de l'observateur |
| scale3d(x,y,z) | Mise à l'échelle sur les trois axes. scale3d(1,1,2) double la profondeur perçue |
| scaleX(x) | Mise à l'échelle horizontale |
| scaleY(y) | Mise à l'échelle verticale |
| scaleZ(z) | Mise à l'échelle en profondeur — visible uniquement si l'élément a des enfants 3D |
| rotate3d(x,y,z,angle) | Rotation autour d'un vecteur 3D personnalisé. Supporté universellement depuis 2015 |
| rotateX(angle) | Rotation autour de l'axe X (bascule avant/arrière) |
| rotateY(angle) | Rotation autour de l'axe Y (pivot gauche/droite) — base des flip cards CSS3 |
| rotateZ(angle) | Rotation dans le plan de l'écran, identique à rotate() en 2D |
| perspective(n) | Perspective intégrée dans transform, point de fuite individuel à l'élément |
Par carabde | Mis à jour le 29 avril 2026
chapitre précédent chapitre suivant