Accueil

Traduction

Tutoriel CSS - sommaire

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

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

CSS : animer des transformations 3D

Rien n'interdit de créer des modèles d'animation basées sur des transforamtions 3D.
Il faut bien sûr que les zones soient aussi 3D.

Attention les zones d'animation de cette page ne sont pas 'responsive'.
Naviguer plutôt avec une tablette en mode paysage voire un ordinateur.

Animer des transformations 3D - premier exemple

Les cartes subissent entre autres une rotation sur l'axe X de 180 degrés. Aussi elles apparaissent inversées un moment.

Le code CSS correspondant

Le conteneur "zone1" est une zone 3D.

Animer des transformations 3D - deuxième exemple

Le déclenchement de cette animation n'est pas automatique mais manuel.

Remarques :
Le carré est centré dans la zone.
En cliquant sur le bouton de commande, le carré grandit puis diminue tout en restant parfaitement centré.

Le code correspondant

Le conteneur "zone2" est une zone 3D avec point de fuite en son centre.
L'élément "carré est centré dans cette zone avant d'être animé et reste centré car le point de fuite est central.
Si le point de fuite était dans un coin l'effet serait très différent ... Voir ci-dessous !

Selon vous, où est le point de fuite ?

Animer des transformations 3D - troisième exemple

Un avion survole la piste d'atterisage en rase-motte.

Le code correspondant

Le "background" de la boite "zone3" est une image vectorielle : piste.svg.
Le sujet de l'animation est aussi une image vectorielle SVG. Notez que le format SVG gère la transparence.

Le point de fuite se situe en haut à gauche.
L'animation consiste à "translater" l'avion sur l'axe Z.

Animer des transformations - exemple 4

Les fondeurs se déplacent vers la droite et le haut. Leur taille diminue progressivement.

Le code correspondant

"zone5" est une boite 3D avec point de fuite dans le coin haut droit.
Animation basée sur une translation sur les 3 axes. Notez que j'ai utilisé les raccourcis translate3D(x,y,z).
La taille des fondeurs diminue, non pas que je change d'échelle, mais en raison de la translation vers le point de fuite.
Les "sprites" de l'animation sont mis en forme et positionnés via la classe "fondeur".