ALBATROS CONCEPT 
Accueil : Contact : Tarifs : Présentation
   Assistance informatique      Développement Web      Formation      Logiciels      Multimedia   
Texte si le navigateur ne supporte pas le HTML Canvas
Pseudo ou Email
Mot de passe
S'inscrire
Mot de passe perdu ? Email non reçu ?
Développeur web expert, PHP5, MySQL5, JavaScript, HTML5, LE MANS METROPÔLE

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.

Bienvenue sur Alpha
la cité des 1000 planètes
ALBATROS CONCEPT
Créateur de logiciels

Liens directs

Valid CSS :: Valid XHTML
Copyright © 2011 par Albatros Concept
Maquette graphique par: GET CSS TEMPLATES modifiée par Albatros Concept