CSS : animations 3D avec CSS

Dans la page précédente les animations étaient en 2D.
Vous savez que l'on peut faire des transformations 3D (avec ou sans transitions) et bien sûr on peut réaliser des animations 3D.

Animation 3D : premier exemple

Survolez chaque carte et observez ...

La carte pointée se déplace sur l'axe Z (donc sa taille varie conformément aux règles de la perspective) et elle bascule (rotation sur l'axe X).

Le code CSS correspondant

Notez que la largeur du conteneur est exprimé en % (responsive web design).

Les éléments enfants de la boîte identifiée container seront centrés dans la boîte parente grâce aux propriétés de l'outil "flexbox" !
Dans cette boîte "container" je définis aussi l'axe Z avec les propriétés perspective et perspective-origin.

Je définis une modèle d'animation identifié transformer3D.
J'applique cette animation aux images contenues dans "container".

Le code HTML

On ne peut plus simple ...

Animation 3D - deuxième exemple

Les skieurs se déplacent vers la droite tout en s'éloignant puisqu'ils apparaissent de plus en plus petits.

Les fondeurs se déplacent sur les trois axes ; aussi sont-ils de plus en plus petits.

Le code CSS

Notez l'utilisation de la propriété background-size pour que l'image de fond s'ajuste à la taille de la boîte 3D.
Il s'agit en effet d'une boite 3D puisque l'axe Z est défini.
Le modèle d'animation repose aussi sur des transformations et plus précisément des translations.
J'aurais pu utiliser ici translate3d(x,y,z)

Le code HTML

Animation 3D : 3ième exemple

Cliquez sur le bouton de commande pour faire atterir l'avion.
Pour que l'avion retrouve sa taille initiale "actualisez" la page.

Le code CSS

Le "background" de la boite "container3" est une image vectorielle : piste.svg. Les navigateurs manipulent désormais les images SVG commes les images matricielles (png, jpg).

Attention la boite identifiée container3 n'est pas 3D puisque l'axe Z n'est pas défini.
L'effet 3D est rendu différemment : à chaque étape de l'animation la taille de l'avion est de plus en plus grande (propriété width).
Notez que l'avion conserve sa taille finale ("forwards") et que l'animation est par défaut en pause ("paused").

Le code HTML

Le "sprite" est aussi une image SVG !

En cliquant sur le bouton de commande appel de la fonction "go".

Le script

	var avion = document.querySelector("#jet"); 
	function go()
	{
		avion.style.animationPlayState ="running" ;
	}

Avec la fonction "go" l'animation relative à l'image identifiée "jet" démarre.

Le code du fichier d'image vectorielle "jet.svg"

Pour info je vous communique un extrait du code de l'image SVG "jet.svg".

Si vous ne comprenez rien au code visitez mon tutoriel "Dessiner avec SVG" dans le même site.

Le code du fichier piste.svg

Il s'agit également d'un fichier d'image vectorielle mais cette fois le code SVG n'a pas été saisi mais généré par le logiciel Inkscape.
Comme il s'agit d'un code généré il n'est pas toujours facile à comprendre ...
Il existe aussi dans mon site un tutoriel sur cet éditeur de SVG via une interface graphique.
Retour menu