Accueil    CSS    Propriété Perspective
 



style css perspective  Style CSS perspective

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété CSS perspective permet de rentrer dans la représentation 3D des éléments html en prenant en compte l'axe de profondeur z. On associe régulièrement la propriété perspective-origin pour modifier la position centrée par défaut du point de vue sur l'élément sur lequel la perspective est définie.

Actuellement chaque navigateur se base sur sa propre version de la propriété perspective :
    - Chrome et Safari utilisent la propriété "-webkit-perspective"
    - Firefox utilise la propriété "-moz-perspective"
    - Opera n'implémente pas encore la propriété perspective
    - Internet Explorer n'implémente pas encore la propriété perspective

Pour bien appréhender la notion de perspective en CSS, il faut tout d'abord comprendre les deux éléments suivant :
    - le référentiel du document html
    - le plan de rendu des éléments

Le référentiel du document html est composé des axes x (axe horizontal), y (axe vertical), z (axe de profondeur) et a pour origine l'angle supérieur gauche du document : Origine (x=0, y=0, z=0).
Le plan de rendu des éléments d'une page html est le plan formé par les axes x et y, c'est à dire le plan ou z vaut zéro. Dans un tel référentiel la perspective est la distance entre le plan de rendu et le point de vue théorique de ce rendu.


perspective


La propriété perspective se définie sur un élément html mais s'applique uniquement aux enfants de celui-ci. On emploie ainsi généralement un conteneur global sur lequel est appliqué la perspective, puis au sein de celui-ci on effectue les transformations voulues sur les éléments enfants.

La valeur donnée à la perspective varie généralement sensiblement entre 500px et 1500px mais il est bien entendu possible d'employer des valeurs en dehors de cette fourchette. En fonction de la valeur de la perspective, les éléments positionnés avec une coordonnées z différente de 0 auront un rendu différent (une valeur positive fait grossir le rendu d'un élément, une valeur négative le fait réduire).


rendu de la perspective


Des exemples avancés utilisant la perspective sont consultables dans la rubrique codes dont par exemple :
    - Zoom en profondeur
    - Cube en 3D
    - Tourniquet d'images



Propriétés pour le style perspective :




Propriété Définition Valeurs CSS
perspective Détermine la distance entre le plan de rendu du ocument html et le point de vue le visualisant Valeur CSS 3


Exemple d'utilisation du style css perspective :






<style type="text/css">
#parent{
   position:relative;
   border:dotted 1px black;
   width:350px;
   height:350px;
   margin:0px auto;
   perspective:700px;
   -webkit-perspective:700px;
   -moz-perspective:700px;
   -o-perspective:700px;
}

.carre{
   position:absolute;
   border:solid 1px black;
   height:150px;
   width:150px;
   top:100px;
   left:100px;
}

.div2{
   transform:translateZ(-250px);
   -webkit-transform:translateZ(-250px);
   -moz-transform:translateZ(-250px);
   -o-transform:translateZ(-250px);
}

.div3{
   transform:translateZ(250px);
   -webkit-transform:translateZ(250px);
   -moz-transform:translateZ(250px);
   -o-transform:translateZ(250px);
}
</style>


<div id="parent">
   Conteneur
   <div class="carre">1 (z=0px)</div>
   <div class="carre div2">2 (z=-250px)</div>
   <div class="carre div3">3 (z=250px)</div>
</div>




Conteneur
1 (z=0px)
2 (z=-250px)
3 (z=250px)