Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5) tours de Hanoï : 13/07/2017

Les tours de Hanoï sont un casse tête consistant à partir d'un emplacement, de reconstituer une tour sur un des 2 autres emplacements avec 2 règles : ne déplacer d'un seul étage à la foi (au sommet d'une tour) et un étage doit toujours se placer soit sur un emplacement, soit sur un étage plus large. Le nombre minimal de coups pour y arriver est de 2ⁿ-1, n étant le nombres d'étages. Le jeu normal comprend 7 étages. Ici vous avez une simulation du jeu avec 3 étages.

Pour les bases et sommets des étages, j'ai été obligé d'introduire des balises SVG pour créer des octogones plan. Les svg étant des balises comme les autres, il est tout à fait possible de les manipuler dans un contexte 3D avec perspectives. Cette démo ne rélève pas de difficulté à programmer, à part la décomposition des mouvements dans le script d'animation (4 pour la plus petite, 2 pour la moyenne et 1 pour la grande).

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.