Les transformations 3D

Donner l'illusion de la 3D sur un écran plat ça suppose de définir une perspective : une profondeur et un point de fuite ; toutes les lignes obliques par rapport au regard se rejoignent au point de fuite.

Exemple 1 : le point de fuite au centre de la boite 3D

Cliquez sur chaque carte et observez !

Si clic sur une carte de la première rangée elle se déplace sur l'axe Z et donc se réduit (déplacement vers le point de fuite) ou s'agrandit (si inverse).
Si clic sur une carte de la deuxième rangée elle tourne sur son axe horizontal (rotateX) ou sur son axe vertical (rotateY). Dans le premier cas les bords gauche et droit ne sont plus parallèles mais des lignes obliques vers le point de fuite. Dans le deuxième cas ce sont les bords haut et bas qui deviennent des lignes obliques dirigées vers le point de fuite.

Le code correspondant

... section{ border : 1px solid black ;} img {display : inline-block ; margin : 2% ; width :20%; vertical-align : top ; } img.transform1:active{transform : translateZ(-400px)} img.transform2:active{transform : translateZ(400px)} img.transform3:active{transform : rotateX(90deg);} img.transform4:active{transform : rotateY(90deg);} ... <body> <section style ="perspective : 800px" > <img src="../images/as_coeur.jpg" class ="transform1" /> <img src="../images/as_carreau.jpg" class ="transform1"/> <img src="../images/as_trefle.jpg" class ="transform2"/> <img src="../images/as_pique.jpg" class ="transform2"/> <img src="../images/roi_coeur.jpg" class ="transform3"/> <img src="../images/roi_carreau.jpg" class ="transform3" /> <img src="../images/roi_trefle.jpg" class ="transform4" /> <img src="../images/roi_pique.jpg" class ="transform4" /> </section> ...

Pour qu'une zone devienne 3D il faut lui attribuer une profondeur avec propriété perspective.
En d'autres termes il faut définir l'axe Z (en plus des axes X et Y de la 2D).

Ici c'est la boîte section qui devient 3D puisqu'on associe la propriété perspective à cette balise.
La valeur de cette propriété indique la distance de votre oeil avec la scène. Plus la valeur sera proche de 0, plus les effets sur l'axe Z seront extrêmes sur le plan du rendu. A l'inverse plus valeur sera forte, plus les effets sur l'axe Z seront modérés sur le plan du rendu.

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 (voir exemple suivant).

Les transformations 3D

Ce serait plus jolie si la transformation était progressive et non pas instantanée ... une transformation 3D avec transition donc comme dans la page suivante (exemple 2).

Exemple2 : le point de fuite au milieu du haut

Par défaut la propriété perspective-origin a pour valeur 50% 50% ou center center.

Syntaxe de perspective-origin

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

Cliquez sur chaque carte et observez !

Si vous cliquez sur la carte "as de pique" celle-ci sort de l'écran !

Le code correspondant

Le code CSS est commun aux deux exemples.
Quant au code HTML il est identique au premier exemple sauf la règle de style dans la balise SECTION.

<section style ="perspective : 600px ; perspective-origin : center top;" >

La valeur de la propriété perspective est plus faible (600px au lieu de 800px) donc les variations de taille en cas de translation sur l'axe Z sont plus fortes.
Le point de fuite n'est plus au centre de la boite 3D mais au milieu du haut.
Retour menu