CSS : principes de la 3D

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);}
	

Les trois boites sont affectées d'une transformation 3D (rotateY, translateZ). Il existe aussi rotateX.

Exemple 1

Le code correspondant :

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

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

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'il 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 :

<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 cette valeur est faible et plus on est près. Plus la valeur 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 : 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%.

La 3D et les images

Nous venons de voir l'incidence d'effets 3D tels rotateX, translateZ dans le cadre d'une boite 3D. Mais sachez qu'il existe aussi la commande rotateX (basculement de l'élément vers le point de fuite).
Je vous montre ci-dessous que les effets 3D s'appliquent non seulement aux éléments de type block mais aussi aux éléments IMG.

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);}
		img.transform5:active{transform : rotateZ(90deg);}
	

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

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"/> <img src="../images/roi_coeur.jpg" class ="transform5"/> </section>

Si clic sur première carte (translateZ) elle se déplace vers le point de fuite donc sa taille se réduit.
Si clic sur deuxième carte (translateZ) elle se déplace vers l'oeil donc elle s'agrandit.
Si clic sur troisième carte (rotateX) 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 (rotateY) elle bascule sur l'axe Y ; les bords haut et bas ne sont plus parallèles mais tendent vers le point de fuite.
Si clic sur la cinquième carte (rotateZ) elle bascule vers la gauche.

Pour aller plus loin

Rien n'interdit d'enchainer plusieurs transformations 3D à un élément. Chapitre suivant : effets 3D - approfondissements
Retour menu