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

#animation {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(-400px) translateY(-100px);} } #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 "animation".
L'axe Z est défini.
Le modèle d'animation repose aussi sur des transformations et plus précisément des translations.

Le code HTML

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