Accueil    CSS    Propriété transform-style
 



style css transform-style  Style CSS transform-style

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


La propriété css transform-style permet d'indiquer comment sont affichés les éléments imbriqués dans un élément html subissant une transformation 3D. Ceux-ci peuvent être soit positionnés dan un espace en 3D soit être applatis dans le plan de l'élément parent.

Actuellement seuls les navigateurs Chrome, Safari et Firefox implémentent leur propre version de la propriété transform-style :
    - Chrome et safari utilisent la propriété "-webkit-transform-style"
    - Firefox utilise la propriété "-moz-transform-style"
    - Opera n'implémente pas encore la propriété "transform-style"
    - Internet Explorer n'implémente pas encore la propriété "transform-style"



Propriétés pour le style transform-style :




Propriété Définition Valeurs CSS
transform-style Détermine si les éléments enfants d'un conteneur html subissant une transformation conservent ou non leur positionnement 3D flat
preserve-3d
CSS 3

Exemple d'utilisation du style css transform-origin :





<style type="text/css">
.divParent{
   width:150px; height:100px; border:solid 2px silver; display:inline-block;
}
.divEnfant{
   border:solid 2px black; font-size:30px;
}
.transformationAvant{
   transform:rotateY(45deg);
   -webkit-transform:rotateY(45deg); -moz-transform:rotateY(45deg);
   -o-transform:rotateY(45deg); -ms-transform:rotateY(45deg);
}
.transformationAvantFlat{
   transform:rotateY(45deg);
   -webkit-transform:rotateY(45deg); -moz-transform:rotateY(45deg);
   -o-transform:rotateY(45deg); -ms-transform:rotateY(45deg);
   transform-style:flat;
   -webkit-transform-style:flat; -moz-transform-style:flat;
   -o-transform-style:flat; -ms-transform-style:flat;
}
.transformationAvantPreserve{
   transform:rotateY(45deg);
   -webkit-transform:rotateY(45deg); -moz-transform:rotateY(45deg);
   -o-transform:rotateY(45deg); -ms-transform:rotateY(45deg);
   transform-style:preserve-3d;
   -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d;
   -o-transform-style:preserve-3d; -ms-transform-style:preserve-3d;
}
.transformationArriere{
   transform:rotateY(-45deg);
   -webkit-transform:rotateY(-45deg); -moz-transform:rotateY(-45deg);
   -o-transform:rotateY(-45deg); -ms-transform:rotateY(-45deg);
}
</style>

En imbriquant deux éléments <div>, puis en appliquant une rotation sur l'élément <div> parent, l'élément <div> enfant subit également la transformation :

<div class="divParent">
   Etat initial
   <div class="divEnfant">3D</div>
</div>

<div class="divParent transformationAvant">
   Rotation de 45°
   <div class="divEnfant">3D</div>
</div>

On observe l'impact de la propriété transform-style en effectuant sur l'élément enfant une rotation inverse (-45°).


<div class="divParent transformationAvantPreserve">
   preserve-3d
   <div class="divEnfant transformationArriere">3D</div>
</div>

<div class="divParent transformationAvantFlat">
   flat
   <div class="divEnfant transformationArriere">3D</div>
</div>

Avec la propriété transform-style valant "preserve-3d" l'élément <div> enfant a conservé son indépendance, la seconde rotation l'ayant replacé à sa position initiale.


En imbriquant deux éléments <div>, puis en appliquant une rotation sur l'élément <div> parent, l'élément <div> enfant subit également la transformation :


Etat initial
3D
      

Rotation de 45°
3D


On observe l'impact de la propriété transform-style en effectuant sur l'élément enfant une rotation inverse (-45°).


preserve-3d
3D
      

flat
3D


Avec la propriété transform-style valant "preserve-3d" l'élément <div> enfant a conservé son indépendance, la seconde rotation l'ayant replacé à sa position initiale.