Accueil

Traduction

Tutoriel CSS - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

CSS : principes de la 3D

Vocabulaire de la 3D

La perspective

La perspective est la dimension qui permet de donner de la profondeur à un scène et donc de donner l’effet 3D.
Elle est représentée par la distance entre l’oeil et la scène. Une perspective faible donne l’impression d’être proche de la scène alors qu'une perspective élevée donne une impression de distance lointaine.

Le point de fuite

Le point de fuite indique le sens dans lequel regarder la scène.
Le point de fuite peut être central : vision frontale de la scène. Il peut être latéral : vision oblique de la scène. Il peut être vertical vision aérienne de la scène.
Il peut être en dehors de la scène.

Création d'une zone 3D via CSS

De nouvelles propriétés CSS

Exemples de zones 3D

La feuille de style commune aux différents exemples

Chaque boite DIV est affectée d'une couleur de fond et d'une transformation 3D.

Exemple 1

Le code correspondant :

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

Exemple 2

Le code correspondant :

Cette fois, la boite ARTICLE est 3D puisqu'elle 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 :

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.
Avec une perspective de 1200px : peu de profondeur ; avec une perspective de 300px : beaucoup plus de profondeur !

Exemple 4

Le code correspondant :

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 de la propriété : 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%.

Le point de fuite peut être en dehors de la scène. Dans ce cas les valeurs de la propriété sont des pourcentages. Voir les deux exemples qui suivent.

Exemple 5

Le point de fuite est en dehors de la scène, en dessous.

Le code correspondant :

Notez les valeurs de perspective-origin. Le point de fuite est sous la scène.

Les transformations 3D

Exemple

Disposition des cartes en l'absence de transformations 3D







Disposition des cartes suite aux transformations 3D


Remarquez que la reine de carreau et la reine de pique sont apparaissent tel leur reflet dans un miroir (les lettres D et Q sont à l'envers).
Le code correspondant :

Le point de fuite est le centre de la scène : vision frontale.

Ce qu'il faut retenir

Il faut bien comprendre que dès que l'environnement est 3D; on ne raisonne plus sur 2 axes mais sur 3 : horizontal (X), vertical (Y) et profondeur (Z).

Pour qu'une boite devienne 3D il faut lui affecter à minima la propriété perspective

Les commandes relatives aux transformations 3D

Je ne reviens pas sur les translateX(), translate(Y) qui ont déjà été abordés avec les transformations 2D.

Les raccourcis