OUJOOD.COM
Tutoriel CSS : la propriété perspective
La propriété CSS perspective est utilisée pour définir la perspective pour les éléments 3D.
Syntaxe générale de la propriété perspective
La syntaxe générale de la propriété perspective est la suivante :
perspective: valeur;
La valeur est exprimée en pixels ou en pourcentage et doit être un nombre positif. Elle détermine la distance entre l'observateur et le plan zéro. Plus la valeur est petite, plus l'effet de perspective sera prononcé.
| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.perspective="50px" |
Valeurs possibles de la propriété perspective
Les valeurs possibles pour la propriété perspective sont :
- none: Valeur par défaut. Identique à 0. La perspective n'est pas définie
- valeur en pixels: détermine la distance en pixels entre l'observateur et le plan zéro.
Exemples pratiques d'utilisation de la propriété perspective
Voici un exemple pratique d'utilisation de la propriété perspective :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Tutoriel CSS : la propriété perspective</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#div1 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid blue;
perspective: 150px;
}
#div2, #div4 {
padding: 50px;
position: absolute;
border: 1px solid black;
background: rgba(100,100,100,0.5);
transform-style: preserve-3d;
transform: rotateX(45deg);
}
#div3 {
position: relative;
height: 150px;
width: 150px;
margin-left: 60px;
border: 1px solid blue;
perspective: none;
}
</style>
</head>
<body>
<h1>La propriété perspective css</h1>
<h2>perspective: 100px:</h2>
<div id="div1">DIV1
<div id="div2">DIV2</div>
</div>
<h2>perspective: none:</h2>
<div id="div3">DIV3
<div id="div4">DIV4</div>
</div>
</body>
</html>
Dans cet exemple, la propriété perspective est appliquée à l'élément parent #div1 pour définir la distance entre l'observateur et le plan zéro. La propriété transform est ensuite appliquée à l'élément enfant #div2 pour effectuer une rotation de 45 degrés autour de l'axe x.
Astuces et conseils d'utilisation de la propriété perspective
- La propriété perspective ne s'applique qu'aux éléments avec une propriété transform spécifiée.
- Il est recommandé d'utiliser des valeurs relativement faibles pour la propriété perspective afin d'obtenir un effet de perspective réaliste.
- La propriété perspective peut être combinée avec la propriété perspective-origin pour définir le point d'observation de l'effet de perspective.
autre exemple : créer un cube avec des transformations 3D css
Essayons quelque chose d'encore plus cool : un cube avec des transformations 3D et la propriété perspective en CSS.Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Tutoriel CSS : la propriété perspective</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.wrapper {
width: 50%;
float: left;
}
.w1 {
perspective: 1000px;
}
.w2 {
perspective: 250px;
}
.wrapper h2 {
text-align: center;
}
.cube {
font-size: 4em;
width: 2em;
margin: 1.5em auto;
transform-style: preserve-3d;
transform: rotateX(-40deg) rotateY(32deg);
}
.side {
position: absolute;
width: 2em;
height: 2em;
background: rgba(200.90.50, 0.6);
border: 1px solid rgba(0,0,0,0.5);
color: white;
text-align: center;
line-height: 2em;
}
.front { transform: translateZ(1em); }
.top { transform: rotateX( 90deg) translateZ(1em); }
.right { transform: rotateY( 90deg) translateZ(1em); }
.left { transform: rotateY(-90deg) translateZ(1em); }
.bottom { transform: rotateX(-90deg) translateZ(1em); }
.back { transform: rotateY(-180deg) translateZ(1em); }
</style>
</head>
<body>
<h1>La propriété perspective css</h1>
<div class="wrapper w1">
<h2><code>perspective: 1000px</code></h2>
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
<div class="wrapper w2">
<h2><code>perspective: 250px</code></h2>
<div class="cube">
<div class="side front">1</div>
<div class="side back">6</div>
<div class="side right">4</div>
<div class="side left">3</div>
<div class="side top">5</div>
<div class="side bottom">2</div>
</div>
</div>
</body>
</html>
Voici comment le cube est fabriqué : il s'appuie sur deux wrappers imbriqués (un pour donner la perspective au cube et un pour envelopper tous les côtés) et 6 éléments pour former les côtés. Chaque élément reçoit sa propre transformation mélangeant translation et rotation dans l'espace 3D (par exemple transform : rotateX(90deg) translateZ(1em)).
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 36 12.0 -webkit- | 10 | 16 10.0-moz- | 9 4.0.3 -webkit- | 23 15.0-webkit- |
Important : veuillez noter que la propriété de perspective n'affecte pas la manière dont l'élément est rendu ; elle active simplement un espace 3D pour les éléments enfants.
C'est la principale différence entre la fonction perspective() et la propriété perspective. La première donne de la profondeur à l'élément, tandis que la seconde crée un espace 3D partagé par tous ses enfants transformés.