Créer des effets d'animation Trois D en CSS
Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :
Effets d'animation 3D en CSS
Avec cette nouvelle astuce, nous allons découvrir qu'il existe des fonctions CSS capables de déformer des objets pour rendre l'illusion d'animations et de déformations en trois dimensions.
Sur l'exemple illustré par la capture, nous animons et déformons trois formes géométriques carrées. Nous leur appliquons des effets de perspective et de rotation. Et selon les étapes non homogènes imposées par le keyframes, l'animation accélère à mi-chemin.
Fichiers Html et ressources
Pour découvrir le potentiel de cette nouvelle astuce, nous proposons de travailler à partir d'une page Web déjà structurée et accompagnée de ses ressources.
- Télécharger le fichier compressé animations-3D.rar en cliquant sur ce lien,
- Puis, le décompresser dans le dossier de votre choix,
- Double cliquer sur le fichier index.htm pour l'ouvrir dans le navigateur par défaut,
- A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
- Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,
...
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<link rel='stylesheet' href='css/mes-styles.css'>
<link rel='stylesheet' href='css/les-styles.css'>
<body>
...
Ils sont situés dans le sous dossier local css. C'est le second qui nous intéresse. Il est nommé les-styles.css. C'est avec lui que nous devons produire ces effets d'animation en trois dimensions. Plus bas dans le code, plus précisément dans le calque parent d'identifiant auCentre, nous trouvons les trois calques (Balises Div) matérialisant les trois carrés.
...
<div id='conteneur'>
<div id='contenu' style='text-align:center;'>
<div id='auCentre'>
<!--
Implémentation
-->
<div id='calque1' class='le_calque'>Effet de<br />Rotation</div>
<div id='calque2' class='le_calque'>Mais<br/>aussi</div>
<div id='calque3' class='le_calque'>Effet de<br/>Torsion</div>
</div>
</div>
</div>
...
Par l'attribut class, ils sont tous dotés du même style nommé le_calque. Par ses réglages, c'est lui qui leur confère cet aspect strictement identique et nous allons bientôt le découvrir. Mais c'est aussi lui qui doit initialiser les paramètres des animations à entreprendre.
- A la racine du dossier de décompression, double cliquer sur le sous dossier Css pour l'ouvrir,
- Dès lors, cliquer droit sur le fichier les-styles.css,
- Dans le menu contextuel, choisir de l'ouvrir avec un éditeur tel que le Notepad++,
.le_calque
{
width: 150px;
height: 150px;
padding: 35px;
background-color: #bac6d9;
display: inline-block;
border: #666 2px solid;
margin: 20px;
font-size: 24px;
font-weight: bold;
}
Initialiser l'animation
Avec l'astuce précédente, nous avons appris à régler certains attributs destinés à être utilisés par le keyframes, celui qui dicte les règles et les étapes de l'animation. A l'occasion de cette nouvelle astuce, nous allons découvrir qu'il existe une forme contractée de la syntaxe pour énumérer toutes les valeurs dans un seul et même attribut.
- A la fin du style le_calque, ajouter la ligne de code suivante :
{
width: 150px;
height: 150px;
padding:35px;
background-color: #bac6d9;
display: inline-block;
border: #666 2px solid;
margin: 20px;
font-size: 24px;
font-weight: bold;
animation: rotation 5s linear infinite;
}
Il n'est donc plus nécessaire de définir tour à tour les attributs animation-name, animation-duration, animation-timing-function et animation-iteration-count. Avec cette syntaxe contractée exploitant l'attribut animation, nous passons le nom de l'animation à jouer en premier paramètre. La durée est stipulée en deuxième paramètre. Le troisième paramètre reçoit le mode linear, pour un effet d'animation constant, sans changement de vitesse. Enfin, le dernier paramètre réglé sur infinite permet d'indiquer que l'animation doit se jouer en boucle sans ne jamais s'arrêter.
Les étapes de l'animation 3D
Nous l'avons appris au cours de l'astuce précédente, c'est le keyframes qui définit les règles et les étapes de l'animation. Ici, il est question de perspective et de rotation pour donner l'illusion d'une transformation 3D. Et ce keyframes doit tout d'abord faire référence à l'animation ciblée par son nom. Comme elle est initialisée dans le style le_calque, ces étapes de déformation concerneront les trois carrés.
- A la suite de la feuille de styles Css, créer le bloc du keyframes comme suit :
{
}
Vous le savez, un keyframes est nécessairement préfixé du symbole de l'arobase. Et dans la déclarative, le nom de l'animation ciblée est bien mentionné.
Les styles Css mettent à disposition des fonctions. Certaines d'entre elles permettent d'opérer des transformations ou des effets d'animations. C'est le cas des deux fonctions qui nous intéressent ici, respectivement la fonction perspective et la fonction rotate3d.
La fonction perspective ne requiert qu'un seul argument. La valeur qui lui est passée définit l'intensité de l'effet 3D. Elle va représenter la distance entre l'utilisateur et l'élément. Plus cette valeur est grande, plus l'élément semblera éloigné de l'utilisateur et moins l'effet 3D sera visible.
La fonction rotate3d requiert quatre arguments quant à elle : rotate3d(x, y, z, a). Le premier paramètre x est une valeur numérique pour définir la composante en X (l'abscisse) du vecteur qui sera le premier axe de la rotation. De la même manière y est une valeur numérique pour définir la composante en Y (l'ordonnée) du vecteur qui sera le deuxième axe de la rotation. Z est aussi une valeur numérique pour définir la composante en Z (la troisième dimension) du vecteur qui sera le troisième axe de la rotation. Enfin, le dernier paramètre a est celui de l'angle de la rotation. Un angle positif impose une rotation dans le sens horaire tandis qu'un angle négatif applique une rotation dans le sens anti-horaire.
Nous souhaitons décomposer la transformation en trois paliers. Le premier est le point de départ. Le deuxième doit intervenir au milieu de la durée de l'animation. Le troisième est le point final de l'animation avant que la boucle ne recommence depuis le début.
- Dans le keyframes, créer la première étape comme suit :
{
0%
{
transform: perspective(150px) rotate3d(1,1,1,0deg);
}
}
Au départ de l'animation (0% de durée), nous exploitons l'attribut transform pour pouvoir déclencher les deux fonctions de transformation à énumérer l'une après l'autre. Nous testons un effet de perspective en appliquant une valeur d'affaissement de 150 pixels. Puis, nous lui associons une rotation. Les trois axes sont concernés comme l'indiquent les chiffres 1 passés respectivement dans les trois premiers paramètres. Et nous débutons cette animation dans l'état d'origine, c'est-à -dire sans rotation (0deg).
- A la suite du keyframes, ajouter la deuxième étape comme suit :
{
0%
{
transform: perspective(150px) rotate3d(1,1,1,0deg);
}
50%
{
transform: perspective(150px) rotate3d(1,1,1,60deg);
}
}
Elle intervient au milieu de l'animation. Il s'agit de la transformation à atteindre à ce stade précis. La perspective est la même. Mais comme la rotation est enclenchée sur les trois axes, elle donnera l'illusion d'intervenir sur d'autres faces de la forme géométrique. Il s'agit d'une petite rotation. Donc sur un délai de 2 secondes et demie, elle donnera l'illusion de se jouer lentement.
- Enfin, toujours à la suite dans le keyframes, ajouter la dernière étape suivante :
{
0%
{
transform: perspective(150px) rotate3d(1,1,1,0deg);
}
50%
{
transform: perspective(150px) rotate3d(1,1,1,60deg);
}
100%
{
transform: perspective(150px) rotate3d(1,1,1,360deg);
}
}
La perspective reste la même mais la rotation est totale sur les deux secondes et demie restantes. Nous devrions donc constater une accélération notable de l'effet d'animation pour rejoindre ce point final plus éloigné.
- Enregistrer les modifications (CTRL + S) et revenir sur la page Web,
- Actualiser le cache du navigateur avec le raccourci clavier CTRL + F5,
La transformation est effectivement assez lente sur les deux premières secondes et demie, puis elle s'accélère brutalement. Et comme vous pouvez le voir, elle se joue bien en boucle.
Nous aurions aussi pu ordonner le départ de l'animation au survol de la souris. Pour cela les paramètres d'initialisation doivent être inscrits dans le style le_calque:hover.
.le_calque:hover{
animation: rotation 5s linear infinite;}
Sur Facebook
Sur Youtube
Les livres
Contact
Mentions légales
