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

CSS : 
#zone1 {width : 400px ; 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 ;  }

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

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

CSS : 
#zone2 {width : 450px ; height : 450px ; perspective : 800px ; perspective-origin : center center ; position : relative ; border : 1px solid red;
	margin : auto; }
@keyframes anim_carre
	{  
		0% {}
		50% {transform : translateZ(400px);} 
		100% {transform : translateZ(-400px);}
	}
#carre {width : 150px ; height : 150px ;  border : 2px solid black ;  position :  absolute ;  left: 150px; top : 150px; 
		animation : anim_carre 10s 0s infinite linear forwards paused ;  }

HTML : 
<div id ="zone2">
	<div id ="carre"> </div>
</div>
<button onclick ="go()">déclenchez l'animation</button>

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

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

CSS :
#zone3 {width : 900px ; 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 : 0px ; top : 0px;
	animation : raser 10s 0s infinite linear ;}
HTML : 
<div id ="zone3">
	<img src="../images/avion.svg" id ="jet"  > 
</div>

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

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 ; }

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

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

Traduction

Tutoriel CSS - sommaire

Révisions CSS2

Nouveautés CSS3

Transformations, transitions & animations

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

CSS : animer des transformations 3D

Animer des transformations 3D - premier exemple

Le code CSS correspondant

Animer des transformations 3D - deuxième exemple

Le code correspondant

Animer des transformations 3D - troisième exemple

Le code correspondant

Animer des transformations - exemple 4

Le code correspondant