...
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
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
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
