Tutoriel CSS3 - sommaire

CSS : animer des transformations 3D

Rien n'interdit de créer des modèles d'animation basées sur des transforamtions 3D.
Vous constaterez que le code HTML est toujours basique ; tout est dans le code CSS !

Animer des transformations 3D - premier exemple

Le rendu

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

Le code correspondant

Le CSS :

#zone1 {width : 360px ; height : 200px ; 
	perspective : 600px ; perspective-origin : center top ; 
	border : 1px solid red; margin : auto;  }

@keyframes anim_cartes
{ 
	0% {}
	50% {transform : translateZ(-200px) rotateX(180deg);}
	100% {transform : translateZ(200px) rotateX(-180deg);}
}
.carte {margin : 10% ; width : 25%; 
	height : auto; 
	animation : anim_cartes 6s 0s infinite linear alternate ;  }

Le conteneur "zone1" est une zone 3D.

Le code HTML : ... <div id ="zone1"> <img src="../images/as_coeur.jpg" class ="carte" /> <img src="../images/as_pique.jpg" class ="carte" /> </div> ...

Animer des transformations 3D - deuxième exemple

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

Le rendu

Remarques :
Le carré est centré dans la zone.
En cliquant sur le bouton de commande, le carré grandit puis diminue tout en se déplaçant sur l'axe Z.

Le code correspondant

Le code CSS :

@keyframes anim_carre
{  
	0% {} 
	50% {transform : translateZ(-300px); }
	100% {transform : translateZ(300px); }
}
#carre {width : 100px ; height : 100px ;  
	background : purple ;
	position :  absolute ;  
	left: 150px; top : 150px; 
	animation : 
		anim_carre 10s 0s infinite linear forwards paused ;  }

Le code HTML : ... <div id ="zone2"> <div id ="carre"> </div> </div> <button onclick ="go()">déclenchez l'animation</button> <button onclick ="stop()">arrêtez l'animation</button> ...

Le script (extrait) :

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

Je ne vous commuique que le code d'une fonction.

Animer des transformations 3D - troisième exemple

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

Le rendu

Le code correspondant

Le CSS :

#zone3 {width : 100% ; height : 500px ; 
	background-image :url(../images/piste.svg) ; margin : auto ;
	background-size : cover ; position : relative ; 
	perspective : 600px ; perspective-origin : left top ;}

@keyframes raser
	{ 
	from{}
	to {transform : translateZ(600px);} 
	}
#jet {width : 5% ; position : absolute ; 
	left : 0% ; top : 0px;
	animation : raser 10s 0s infinite linear ;}

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.

Le code HTML : ... <div id ="zone3"> <img src="../images/avion.svg" id ="jet" > </div> ...

Animer des transformations - exemple 4

Le rendu

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

Le code correspondant

Le CSS :

#zone5 {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 : 80px; }

@keyframes deplacer 
{
	from{ transform : translate3d(0px,0px,0px) ;}
	to{transform : translate3d(1100px,-150px,-600px);}
} 
#fondeur1 {top : 380px ; 
	animation : deplacer 16s 0s infinite linear ; }
#fondeur2 {top : 400px ; 
	animation : deplacer 14s 2s infinite linear ; }

"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".

Le HTML : ... <div id ="zone5"> <img src ="../images/fondeur.gif" class ="fondeur" id ="fondeur1"/> <img src ="../images/fondeur2.gif" class ="fondeur" id ="fondeur2" /> </div> ...