Animations CSS 3D

Cette page fonctionne parfaitement avec Chrome et Firefox.
Concernant Edge il supporte difficilement des images vectorielles (format SVG) en "background" de boite ou en "sprite".

Sprite : dans le domaine de l'infographie et des jeux vidéo, ce terme désigne une image en deux dimensions qui peut être déplacée.

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

Animation 3D : premier exemple

Cliquez sur une des cartes et observez
L'animation 3D de la carte cesse dès que vous relachez le bouton gauche de la souris.

L'image sélectionnée se déplace sur l'axe Z donc elle sa taille varie conformément aux règles de la perspective.
Si déplacement vers le point de fuite la taille diminue sinon la taille augmente.

Le code CSS correspondant

#container {width : 100% ; height :400px ; perspective : 800px ; perspective-origin : top center ; border :1px solid black; display : flex; flex-direction : row; justify-content : center ; align-items : center;} #container img {margin : 1% ; width : 25%; } @keyframes transformer3D { 0% {transform : translateZ(0px);} 50% {transform : translateZ(-800px);} 100% {transform : translateZ(0px);} } #img {margin : 10px ; height:250px; } #container img:active{animation : transformer3D 10s 0s infinite linear alternate ;}

Notez que la largeur du container 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 à n'importe quelle image de la boite 3D.

Le code HTML

<div id ="container"> <img src="../images/as_coeur.jpg" /> <img src="../images/as_pique.jpg" /> </div>

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.

Le code CSS

#container2 {width : 100% ; height :500px ; background-image :url(../images/paysage_hiver3.jpg) ; background-size : cover ; border :1px solid black ; position : relative ; perspective : 800px ; perspective-origine : top right; } .fondeur {position:absolute ; left : 0px ; height : 100px; } #fondeur1 {top : 380px ;} #fondeur2 {top : 400px ; } @keyframes deplacer { from{transform : translateX(0px) translateZ(0px) translateY(0px);} to{transform : translateX(1000px) translateZ(-600px) translateY(-150px);} } #fondeur1 {animation : deplacer 16s 0s infinite linear ; } #fondeur2 {animation : deplacer 14s 2s infinite linear ; }

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.

Les fondeurs apparaissent de plus en plus petits car il y a translation entre autres sur l'axe Z (vers le point de fuite).

Le code HTML

<div id ="container2"> <img src ="../images/fondeur.gif" class ="fondeur" id ="fondeur1"/> <img src ="../images/fondeur2.gif" class ="fondeur" id ="fondeur2" /> </div>

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

#container3 {width : 100% ; height :500px ; background-image :url(../images/piste.svg) ; background-size : cover ; border :1px solid black ; position : relative ; } #jet {position : absolute; } @keyframes atterir { 0% {left : 10px; top :10px ; width : 10%;} 50% {left : 180px ; top : 200px ; width :30%; } 100% {left : 360px ; top : 350px ; width :40%; } } #jet {animation : atterir 16s 0s 1 linear forwards paused ; }

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

<div id ="container3"> <img src="../images/avion.svg" id ="jet" /> <button onclick ="go()">faites atterir le jet</button> </div>

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"

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox = "0 0 400 200" width = "100%" height = "auto" > <symbol id ="avion" viewBox ="0 0 300 110"> <line x1="0" y1="70" x2="260" y2="70" stroke="lightgrey" stroke-width ="4" stroke-linecap = 'round'/> <line x1="130" y1="0" x2="130" y2="40" stroke="lightgrey" stroke-width ="2" stroke-linecap = 'round'/> <line x1="80" y1="20" x2="180" y2="20" stroke="lightgrey" stroke-width ="2" stroke-linecap = 'round'/> <circle cx="130" cy ="60" r ="30" fill ="lightgrey" /> <circle cx="130" cy ="65" r ="2" fill ="grey" /> <circle cx="80" cy ="90" r ="15" fill ="lightgrey" /> <circle cx="180" cy ="90" r ="15" fill ="lightgrey" /> <circle cx="80" cy ="90" r ="10" fill ="gray" /> <circle cx="180" cy ="90" r ="10" fill ="gray" /> <line x1="100" y1="70" x2="100" y2="100" stroke="lightgrey" stroke-width ="2" /> <line x1="160" y1="70" x2="160" y2="100" stroke="lightgrey" stroke-width ="2" /> <line x1="110" y1="90" x2="110" y2="110" stroke="darkgrey" stroke-width ="6" /> <line x1="150" y1="90" x2="150" y2="110" stroke="darkgrey" stroke-width ="6" /> <polygon points ="130,30 155,50 105,50" fill ="black" /> <line x1="130" y1="30" x2="130" y2="50" stroke="lightgrey" stroke-width ="2" /> </symbol> <use xlink:href ="#avion" width ="210" height="70" /> </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