Accueil

Tutoriel CSS - sommaire

Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

CSS : animer des transformations 2D ou 3D

Rien n'interdit de créer des modèles d'animation basées sur des transforamtions 2D ou 3D.

Attention les zones d'animation de cette page ne sont pas 'responsive' ; orientez la tablette en mode paysage.

Animer des transformations 3D - 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

#container {width : 900px ; height : 400px ; perspective : 800px ; perspective-origin : top center; 
	margin : auto; }
@keyframes anim_cartes
	{ 
		0% {}
		50% {transform : translateZ(-200px) rotateX(180deg);}
		100% {transform : translateZ(200px) rotateX(-180deg);}
	}
.carte {margin : 1% ; width : 25%; height : auto; 
	animation : anim_cartes 10s 0s infinite linear alternate ;  }

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

Le code HTML

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

On ne peut plus simple ...

Animer des transformations 2D - premier 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 vers la droite et vers le fond. Dans une première étape, leur taille diminue car ils s'éloignent de l'oeil puis dans un deuxième temps ils se rapprochent et leur taille augmente.

Le code CSS

#container2 {width : 900px ; height :500px ; 
	background-image :url(../images/paysage_hiver3.jpg) ; margin :auto;  
	background-size : cover ;  position : relative ;}
.fondeur {position :absolute ; left : 0px ; height : 50px; width : auto; }
#fondeur1 {top : 400px ;}
#fondeur2 {top : 450px ; }
@keyframes deplacer_fondeurs 
	{
		0%{}
		50% {transform : translateX(400px) translateY(-100px) scale(.6) }
		100%{transform : translateX(800px) translateY(50px) scale(1.2) ;}
	} 
#fondeur1 {animation : deplacer_fondeurs 18s 0s infinite linear ; }
#fondeur2 {animation : deplacer_fondeurs 16s 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.
La zone d'animation n'est pas "responsive" (largeur exprimée en pixels) et elle n'est que 2D mais cependant il y a un effet de perspective grâce au changement d'échelle appliqué aux "sprites".

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>

Animer des transformations 2D - deuxième exemple

Cliquez sur le bouton de commande pour faire atterrir l'avion.
Pour que l'avion retrouve sa taille et position initiales, il suffit d'actualiser la page.

Dès que vous cliquez sur le bouton de commande (situé sous la zone d'animation) l'avion entame sa procédure d'atterrisage.
Notez qu'il doit corriger brutalement sa trajectoire pour ne pas atterrir hors de la piste.
Plus il approche et plus il apparait grand.
La zone n'étant que 2D, l'effet de perspective est rendu grâce au changement d'échelle (commande scale) appliqué au "sprite"

Le code CSS

#container3 {width : 900px ; height : 500px ; background-image :url(../images/piste.svg) ; margin : auto;
	background-size : cover ; position : relative ;}
@keyframes atterrir 
	{ 
		0% {}
		50% {transform : translateX(300px) translateY(200px) scale(1.5);}
		to {transform : translateX(400px) translateY(400px) scale(3);}
	}
#jet {position : absolute; left : 0px ; top : 0px; height : 40px ; 
	width : auto; animation : atterrir 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, gif).
Notez que la zone d'animation n'est pas "responsive.

Le code HTML

<div id ="container3"> <img src="../images/avion.svg" id ="jet" /> <button onclick ="go()">faites atterrir 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 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.