Vous avez ici des démos d'animations utilisant uniquement les propriétés CSS3 du HTML! Aucun code javascript (même si le besoin s'en fait sentir pour certaines taches répétitives), que du CSS pur avec les méthodes "animate" et "perspective" notamment. Ces possibilités (notamment avec les perspectives) peuvent servir de base à des jeux 3D (comme Doom par exemple) et sans utiliser le raytracing qui pompe énormément de ressources informatique! (Il faut une sacré carte 3D pour utiliser l'OpenGL).

La programmation de cubes 3D en CSS est nettement plus simple que par l'utilisation d'OpenGL (où on se prend la tête avec les calculs de vextrex!) mais hélas, ça reste limité à des plans qu'on peut déplacer et formater en 3D. Avec l'ajout de SVG on peut éventuellement fermer les polyèdres.

Attention : toutes les animations présentées sur cette page sont des conceptions et créations personnelles (Bruno AUBIN de Coulaines dans la Sarthe), imaginées à partir des possibilités offertes par CSS3 et les vues en perspective! De ce fait, j'autorise toute réutilisation de ce code à des fins pédagogique, tel quelle ou réadaptés.

Pour les explications il suffit de comprendre les notions de perspective, d'héritage de propriétés et d'imbriquer des div les uns dans les autres pour certaines formes complexes. Vous trouverez sur cette page, la liste des propriétés pouvant être animées en CSS. La propriété "background-image" dont je me sert dans 2 des démos, n'en fait pas parti!

Animations démos 2D

1. Propriétés générales : mercredi 12/07/2017
2. Pendule de Foucault : mercredi 12/07/2017
3. Horloge tournant dans le sens anti-horaire : samedi 08/07/2017
4. Générique de la série "les envahisseurs" : dimanche 09/07/2017
5. Lampe sur texte avec ombre se déplaçant : dimanche 09/07/2017
6. Tétris 2D : Vendredi 01/09/2017

Animations démos 3D : Perspectives

Ensemble de démos d'animation utilisant la propriété "perspective" des CSS3.

1. 4 animations 3D généralistes (cube, hexagone, feuillet et boîte ouvrante) : samedi 01/07/2017
2. Vol d'un papillon (Machaon) : dimanche 02/07/2017
3. Générique du film Star Wars (La guerre des étoiles) : dimanche 02/07/2017
4. Immeubles poussant comme des champignons : lundi 03/07/2017
5. Pâquerette vibrant dans le vent : mardi 04/07/2017
6. Mouche se posant sur une dionée qui l'attrape : mercredi 05/07/2017
7. Mobile pour enfant tournant : jeudi 06/07/2017
8. Château fort en rotation : vendredi 07/07/2017
9. Les tours de Hanoï : jeudi 13/07/2017
10. Effet relief (dit "3D") : vendredi 14/07/2017
11. Tétris 3D
12. Molécule d'ADN en rotation : mercredi 19/07/2017
13. Parcours 3D (et ce sera la dernière animation CSS3 avec Perspective!!) : vendredi 28/07/2017

Navigateurs compatibles avec ces animations :

1. Opera : ok
2. Chrome/Chromium : ok
3. Safari pour Mac OS (un grand merci à Sébastien Moineau pour les tests!)
4. Vivaldi : ok
5. Qupzilla : ok
6. Firefox, Seamonkey et consort : pbme avec les mix-blend-mode (Effets reliefs). Le reste est ok
7. Epiphany : quelques problèmes d'affichage (ordre de hauteur).

Navigateurs non compatibles :

1. Midori
2. Eric5 webbrowser
3. Konqueror/Rekonq