Tutoriel CSS - sommaire

CSS : principes de la 3D

Vocabulaire de la 3D

La perspective

La perspective est la dimension qui permet de donner de la profondeur à un scène et donc de donner l’effet 3D.
Elle est représentée par la distance entre l’oeil et la scène. Une perspective faible donne l’impression d’être proche de la scène alors qu'une perspective élevée donne une impression de distance lointaine.

Le point de fuite

Le point de fuite indique le sens dans lequel regarder la scène.
Le point de fuite peut être central : vision frontale de la scène. Il peut être latéral : vision oblique de la scène. Il peut être vertical vision aérienne de la scène.
Il peut être en dehors de la scène.

Création d'une zone 3D via CSS

De nouvelles propriétés CSS

Nouvelles propriétés pour gérer une zone 3D :
• perspective : la valeur en pixels indique la profondeur de la scène 3D.
• perspective-origin : pour définir le ou les points de fuite (2 valeurs : mots clés ou pourcentages)
• backface-visibility : précise si la face arrière d'un éléments est visible ou pas. Valeurs possibles: "visible" ou "hidden"
• transform-style : propage ou pas les transformations 3D aux "enfants". Propage si la valeur est à "preserve-3d" ; ne propage pas si la valeur est "flat".

Exemples de zones 3D

La feuille de style commune aux différents exemples

Chaque boite DIV est affectée d'une couleur de fond et d'une transformation 3D.

Exemple 1

Le code correspondant : <article class ="conteneur"> <div class =" boite verte"></div> <div class ="boite rouge"></div> <div class ="boite jaune"></div> </article>

Le conteneur ARTICLE étant 2D (pas de perspective), les effets 3D de ses "enfants" (les 3 DIV) ne s'appliquent pas !

Exemple 2

Le code correspondant : <article class ="conteneur" style ="perspective :1200px;"> ...

Cette fois, la boite ARTICLE est 3D puisqu'elle a une perspective avec une profondeur et un point de fuite (par défaut le centre de la boite).

Il existe désormais en plus des axes X et Y, un axe Z avec une certaine profondeur.

Les bords gauche et droit des boites verte et jaune ne sont plus parallèles mais des lignes obliques dirigées le point de fuite (effet de la transformation rotateY()).

Exemple 3

Le code correspondant : <article class ="conteneur" style ="perspective :300px;"> ...

Il est exactement identique à celui de l'exemple précédent sauf la valeur de la propriété perspective (300px au lieu de 1200px).
Vous constatez que la scène a beaucoup plus de profondeur que l'exemple précédent.
Avec une perspective de 1200px : peu de profondeur ; avec une perspective de 300px : beaucoup plus de profondeur !

Exemple 4

Le code correspondant : <article class ="conteneur" style ="perspective :300px; perspective-origin : 50% 0%;"> ...

Par défaut, le point de fuite est placé au centre de la boite 3D mais il peut être modifié grâce à la propriété perspective-origin.
C'est le cas dans ce dernier exemple ; le point de fuite est au milieu du bord haut du conteneur.

Syntaxe de la propriété : perspective-origin : positionH positionV
Exemples de valeur pour "positionH" : left ou 0%, center ou 50%, right ou 100%
Exemples de valeurs pour "positionV" : top ou 0%, center ou 50%, bottom ou 100%.

Le point de fuite peut être en dehors de la scène. Dans ce cas les valeurs de la propriété sont des pourcentages. Voir les deux exemples qui suivent.

Exemple 5

Le point de fuite est en dehors de la scène, en dessous.

Le code correspondant : <article class ="conteneur" style ="perspective : 300px; perspective-origin : center 150%;"> ...

Notez les valeurs de perspective-origin. Le point de fuite est sous la scène.

Les transformations 3D

Exemple

Disposition des cartes en l'absence de transformations 3D

Disposition des cartes suite aux transformations 3D

Remarquez que la reine de carreau et la reine de pique sont apparaissent tel leur reflet dans un miroir (les lettres D et Q sont à l'envers).
Le code correspondant : <article style ="perspective : 600px ; perspective-origin : 50% 50% ; border : 1px solid red;" > <img src="../images/as_coeur.jpg" style ="transform : translateZ(150px);" /> <img src="../images/as_carreau.jpg" style ="transform : translateZ(-150px);" /> <img src="../images/as_trefle.jpg" style ="transform : rotateZ(45deg);" /> <img src="../images/as_pique.jpg" style ="transform : rotateZ(90deg);" /> <br> <img src="../images/dame_coeur.jpg" style ="transform : rotateX(45deg);" /> <img src="../images/dame_carreau.jpg" style ="transform : rotateX(180deg);" /> <img src="../images/dame_trefle.jpg" style ="transform : rotateY(-45deg);" /> <img src="../images/dame_pique.jpg" style ="transform : rotateY(-180deg);" /> </article>

Le point de fuite est le centre de la scène : vision frontale.

Ce qu'il faut retenir

Il faut bien comprendre que dès que l'environnement est 3D; on ne raisonne plus sur 2 axes mais sur 3 : horizontal (X), vertical (Y) et profondeur (Z).

Pour qu'une boite devienne 3D il faut lui affecter à minima la propriété perspective

Les commandes relatives aux transformations 3D

Les commandes disponibles :
• sur l'axe X : rotateX() ; translateX() ; scaleX()
• sur l'axe Y : rotateY() ; translateY() ; scaleY()
• sur l'axe Z : rotateZ() ; translateZ() ; scaleZ()

Je ne reviens pas sur les translateX(), translate(Y) qui ont déjà été abordés avec les transformations 2D.

Notons :
• translateZ(valeur négative) : élément se déplace vers le point de fuite et sa taille se réduit
• translateZ(valeur positive): élément se déplace vers l'oeil donc s'agrandit
• rotateX(): l'élément bascule ; les bords gauche et droit ne sont plus parallèles mais tendent vers le point de fuite. Si la valeur est 180deg, l'image apparait retournée
• rotateY() : élément pivote ; les bords haut et bas ne sont plus parallèles mais tendent vers le point de fuite. Si la valeur est 180 deg, l'image apparait inversée, tel son reflet dans un miroir
• rotateZ() : l'élément tourne vers la droite ou vers la gauche selon que la valeur est positive ou négative. RotateZ() correspond à rotate() dans un environnement 2D

Les raccourcis

Mais il existe aussi des raccourcis (qui remplacent trois commandes) :
• rotate3d(x, y, z)
• translate3d(x, y, z)
• scale3d(x, y, z)