CSS & la 3D : principes

La 3D et les boites

La feuille de style commune aux différents exemples

section{position : relative ; border : 1px solid black ; width :96% ;height:300px; margin : auto; } div {position : absolute; width : 30% ; height : 150px; opacity : 0.5; } .verte {background : lime; top : 100px; left : 10%; transform : rotateY(45deg);} .rouge {background : red; top : 100px; left : 35%; transform : translateZ(-200px);} .jaune {background : yellow; top : 100px; left : 60%;transform : rotateY(-45deg);}

Exemple 1

Le code correspondant :

<section> <div class ="verte"></div> <div class ="rouge"></div> <div class ="jaune"></div> </section>

La fonction transform avec des commandes 3D telles rotateY(), translateZ() ne sont pas prises en compte ici car le conteneur SECTION n'est pas 3D !!!

Exemple 2

Le code correspondant :

<section style ="perspective :1200px;"> <div class ="verte"></div> <div class ="rouge"></div> <div class ="jaune"></div> </section>

Cette fois la boite SECTION est 3D puisqu'elle a une perspective : une profondeur et un point de fuite.
Ici le point de fuite n'est pas défini donc par défaut c'est le centre du conteneur.

En fait on définit l'axe Z !

Les bords gauche et droit des boites verte et jaune ne sont plus parallèles mais des lignes obliques vers le point de fuite. C'est l'effet d'une transformation 3D avec l'argument rotateY.

Exemple 3

Le code correspondant :

<section style ="perspective :300px;"> <div class ="verte"></div> ... </section>

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.

La valeur de la propriété perpective indique la distance de votre oeil avec la scène. Plus la perspective est faible, plus on est près. Plus la perspective est élevée, plus on est loin.
Avec une perspective de 1200px : peu de profondeur ; avec une perspective de 300px : beaucoup plus de profondeur !

Exemple 4

Le code correspondant :

<section style ="perspective :300px; perspective-origin : 50% 0%;"> <div class ="verte"></div> <div class ="rouge"></div> <div class ="jaune"></div> </section>

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 : perspective-origin : horizontal vertical
le mot clé "horizontal" peut prendre la valeur de left (0%), center (50%) ou right(100%).
Le mot clé "vertical" peut prendre la valeur de top(0%) , center (50%) ou bottom (100%).

La 3D et les images

Rien n'interdit d'appliquer des effets 3D à des images !

Exemple

Cliquez sur chaque carte et observez !

La feuille de style relative à l'exemple

img {display : inline-block ; margin : 2% ; width :20%; vertical-align : top ; } img.transform1:active{transform : translateZ(-200px)} img.transform2:active{transform : translateZ(200px)} img.transform3:active{transform : rotateX(90deg);} img.transform4:active{transform : rotateY(-90deg);}

Transformation 3D uniquement si clic sur l'une des images.

L'argument de translate() est exprimé en pixels(valeur positive ou négative) ; l'argument de rotateX() / rotateY() est exprimé en "deg" (valeur positive ou négative).
Il existe d'autres commandes 3D ; voir page suivante !

Le code HTML correspondant

<section style ="perspective : 600px ; perspective-origin : 50% 0%" > <img src="../images/as_coeur.jpg" class ="transform1" /> <img src="../images/as_carreau.jpg" class ="transform2"/> <img src="../images/as_trefle.jpg" class ="transform3"/> <img src="../images/as_pique.jpg" class ="transform4"/> </section>

Si clic sur première carte elle se déplace vers le point de fuite donc sa taille se réduit.
Si clic sur deuxième carte elle se déplace vers l'oeil donc elle s'agrandit.
Si clic sur troisième carte elle bascule sur l'axe X ; les bords gauche et droit ne sont plus parallèles mais tendent vers le point de fuite.
Si clic sur quatrième carte elle bascule sur l'axe Y ; les bords haut et bas ne sont plus parallèles mais tendent vers le point de fuite.
Retour menu