Accueil
Mes tutoriels sur la programmation

Tutoriel CSS - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

Mon site est gratuit pour les visiteurs (et sans publicité) mais sachez qu'il a un coût ...
Signé : l'auteur.

CSS : principes de la 3D

La 3D et les boites

La feuille de style commune aux différents exemples

		.conteneur{position : relative ; border : 1px solid black ; width :100% ;
			height:300px; margin : auto; }
		.boite {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);}
	

Chaque classe est affectée d'une transformation 3D (rotateY, translateZ). Il existe aussi rotateX.

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 (plan unique), les effets 3D de ses "enfants" (les 3 DIV) ne s'appliquent pas !

Exemple 2

Le code correspondant :

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

Cette fois, la boite ARTICLE est 3D puisqu'il 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;"> <div class ="boite verte"></div> <div class ="boite rouge"></div> <div class ="boite jaune"></div> </article>

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 :

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

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%.

Les effets 3D

Exemple

Cliquez sur chaque carte et observez !

La feuille de style relative à l'exemple

	img {display : inline-block ; margin : 1% ; width :10%; vertical-align : top ;  }
		
	img.transform1:active{transform : translateZ(-300px)}
	img.transform2:active{transform : translateZ(300px)}
	img.transform3:active{transform : rotateX(45deg);}
	img.transform4:active{transform : rotateX(-180deg);}
	img.transform5:active{transform : rotateY(-45deg);}
	img.transform6:active{transform : rotateY(180deg);}
	img.transform7:active{transform : rotateZ(90deg);}
	img.transform8:active{transform : rotateZ(-90deg);}
	

Transformation 3D si clic sur l'une des images.
Notez bien l'effet de chaque commande en particulier les rotations.

Le code HTML correspondant

<article 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"/> <img src="../images/roi_carreau.jpg" class ="transform6"/> <img src="../images/roi_trefle.jpg" class ="transform7"/> <img src="../images/roi_pique.jpg" class ="transform8"/> </article>

Ce qu'il faut retenir

Je ne reviens pas sur les translateX(), translate(Y) qui ont déjà été abordés avec les transformations 2D.
La commande rotate() de la 2D est remplacée en 3D par : rotateX(), rotateY() et rotate(Z).

Pour aller plus loin

Rien n'interdit d'enchainer plusieurs transformations 3D à un élément.
Une transition peut porter sur une transformation 3D.
Voir tout cela dans le chapitre suivant !