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.

Cliquez sur chaque carte et observez !

On obtient des effets 3D !
Si clic sur une carte de la première rangée elle pivote telle une porte qu'on ouvre et ses bords haut et bas ne sont plus parallèles mais sont dirigés vers le point de fuite.
Si clic sur une carte de la deuxième rangée elle penche vers le bas et ses bords gauche et droite ne sont plus parallèles mais sont dirigés vers le point de fuite.

Le code CSS de la page

section{ border : 1px solid black ; perspective : 800px ;} img {display : inline-block ; margin : 2% ; width :20%; vertical-align : top ; } img.rotation1:active{transform : rotateY(90deg);} img.rotation2:active{transform : rotateX(90deg);}

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.

Par défaut, le point de fuite est placé au centre de la boîte mais il peut être modifié grâce à la propriété perspective-origin (voir page suivante).

Le code HTML de la page

... <section> <img src="../images/as_coeur.jpg" class ="rotation1" /> <img src="../images/as_carreau.jpg" class ="rotation1"/> <img src="../images/as_trefle.jpg" class ="rotation1"/> <img src="../images/as_pique.jpg" class ="rotation1"/> <img src="../images/roi_coeur.jpg" class ="rotation2"/> <img src="../images/roi_carreau.jpg" class ="rotation2" /> <img src="../images/roi_trefle.jpg" class ="rotation2" /> <img src="../images/roi_pique.jpg" class ="rotation2" /> </section> ...

Les quatre premières cartes (première rangée) bénéficient de la classe rotation1 donc sur clic rotation de 90 degrés sur l'axe Y (la carte pivote sur son axe vertical en direction du point de fuite).
Les quatre dernières cartes (deuxième rangée) bénéficient de la classe rotation2 donc sur clic rotation de 90 degrés sur l'axe X (la carte tombe vers le bas en direction du point de fuite).
Retour menu