CSS3 La propriété perspective 

...


Les propriétés CSS

Exemple Définissez le point de vue d'où un élément est perçu :

Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:150;
-webkit-perspective:150; /* Safari and Chrome
*/
}
 
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: #f0f;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari
and Chrome */
}
</style>
</head>
 
<body>
 
<div id="div1">
  <div id="div2"> BONJOUR
</div>
</div>
 
</body>
</html>


Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

La propriété perspective n'est pas prise en charge dans aucun des navigateurs.

Chrome et Safari prend en charge une solution de rechange, la propriété -webkit-perspective.


Définition et utilisation

La propriété perspective définit de combien de pixels un élément 3D est déplacé de la vue. Cette propriété vous permet de changer le point de vue sur comment sont lus des éléments 3D.

Lorsque vous définissez la propriété perspective pour un élément, c'est les éléments enfants qui obtiennent la vue en perspective, pas l'élément lui-même.

Remarque : La propriété perspective affecte uniquement les éléments transformés 3D !

Astuce : Utilisez cette propriété avec la propriété perspective-origine , qui permet de changer la position de fond des éléments 3D.

 Pour mieux comprendre la propriété perspective voir cet exemple :

Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: #f0f;
transform: rotateX(60deg);
-webkit-transform: rotateX(50deg); /* Safari
and Chrome */
}
</style>
<script>
function changePerspective(value)
{
document.getElementById('div1').style.webkitPerspective=value;
document.getElementById('persp').innerHTML=value;
}
</script>
</head>
<body
onload="changePerspective(60);updateOrigPerpective()">
<div id="div1">
  <div id="div2"> BONJOUR
</div>
</div>
Changer perspective:<br>
<input type="range" min="45" max="200"
value="60" onchange="changePerspective(this.value)"
/><br>
-webkit-perspective: <span
id="persp"></span>;
</body>
</html>
Valeur par défaut : aucun
Héritée : ne
Version: CSS3
Syntaxe JavaScript : objet.style.perspective=500

Syntaxe

perspective: nombre|none;

Property Value Description
nombre Définit de combien de pixels l'élément est déplacé de la vue
none Valeur par défaut. Identique à 0. La perspective n'est pas définie

Par carabde 10 mars 2014