Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5), parcours 3D : 28/07/2017

On termine avec les clips d'animation CSS3 par un petit parcours sur un terrain buccolique de 3000 px de côté (une prairie avec un papillon et des murs semi transparent avec du texte). La marque noire du bas de l'écran indique le centre horizontal.

Cette démo a pris du temps à se développer. La mise en place du chemin (qui est un ensemble de feuilles de style de couleur bleue, avec des coins arrondis). Le calcul des positions n'a pas été simple. Mais le plus complexe a bien été le calcul du parcours dans le cadre d'une animation!! C'est là qu'il faut être bon en géométrie et en trigonométrie...

Une des difficultés de cette animation a été de changer les bases du repère (top, left et l'angle, ainsi que le transform-origin) avant chaque rotation!! Ceci est fait très rapidement (0.001% après chaque noeud de l'animation).

Ces possibilités 3D de CSS3 augurent la possibilité de faire de nombreux jeux 3D à la Doom, Hexen, Quake ou TOWERS (excellent jeu existant sur Atari Falcon, du style Donjons et Dragon mais en nettement mieux!) très simplement! Dans les jeux 3D on n'a pas à faire ces longues transitions animées, puisqu'à chaque mouvement, on recalcule les positions top et left ainsi que le transform-origine qui dépend directement de ces top et left là (ça se calcule directement en javascript). Enfin, on peut avec ces CSS3 faire des parcours comme visiter virtuellement la cité plantagenêt au Mans, l'intérieur d'une cathédrale ou d'une maison...

Vous pouvez utiliser le code source (en affichant le source de la page et utilisant le fichier CSS). J'ai conçu cette animation à partir de la possibilité de faire de la 3D avec des cadres en CSS3.