Accueil    CSS    Propriété Perspective-origin
 



style css perspective-origin  Style CSS perspective-origin

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


La propriété CSS perspective-origin est complémentaire à la propriété perspective et permet de modifier la position du point de fuite de la perspective (définie sur l'axe de profondeur Z par la propriété css perspective) au niveau des coordonnées de l'axe horizontal X et de l'axe vertical Y.

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

La perspective définie sur un élément html ne s'applique pas directement à lui mais uniquement à ses éléments enfants. Il en est de même avec la déclaration du point de fuite qui a par défaut la valeur :

       perspective-origin:50% 50%;


Cette valeur se traduit par : 50% de la largeur width et 50% de la hauteur height de l'élément html sur lequel elle est appliquée. Il est possible de modifier ces valeurs par de nouvelles valeurs fixes (px), des pourcentages ou des positions (top, left ...).



Propriétés pour le style perspective-origin :




Propriété Définition Valeurs CSS
perspective-origin Détermine la position du point de fuite de la perspective sur les axes X et Y par rapport à l'élément html sur lequel la perspective est appliquée. valeur
%
bottom
center
left
right
top
CSS 3


Exemple d'utilisation du style css perspective-origin :






<style type="text/css">
#parent1{
   position:relative;
   display:inline-block;
   border:dotted 1px black;
   width:250px;
   height:250px;
   margin:15px;
   perspective:700px;
   -webkit-perspective:700px;
   -moz-perspective:700px;
   -o-perspective:700px;
   perspective-origin:90% 90%;
   -webkit-perspective-origin:90% 90%;
   -moz-perspective-origin:90% 90%;
   -o-perspective-origin:90% 90%;
}

#parent1{
   position:relative;
   display:inline-block;
   border:dotted 1px black;
   width:250px;
   height:250px;
   margin:15px;
   perspective:700px;
   -webkit-perspective:700px;
   -moz-perspective:700px;
   -o-perspective:700px;
   perspective-origin:10% 10%;
   -webkit-perspective-origin:10% 10%;
   -moz-perspective-origin:10% 10%;
   -o-perspective-origin:10% 10%;
}

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

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

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


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

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





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