Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5) d'un château fort avec pont-levis : 7/07/2017
Dans cette animation, vous avez quasiment tout ce qui est possible de faire en 3D avec les CSS3. Pour les donjons, puisqu'on ne peut créer que des plans en CSS3, j'ai construit 2 octogones par plans verticaux doublés à l'intérieur (et il a fallu calculer les rayons relatif, pour le reste, c'est de la rotation en Y et de la translation en X et Y initiaux).Pour le sommet des donjons, 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.
Les murs et les donjons ont un même dégradé utilisé en CSS3. Pour le mur en avant, c'est AUSSI fait uniquement avec les CSS3 avec 2 astuces. J'ai coupé le mur en 3 parties, de gauche à droite. Pour la partie sur le pont levis, afin de conserver le MÊME dégradé, une autre astuce a été d'utiliser un div dont l'affichage extérieur (en l'occurence sous le bas ici, la hauteur étant de 40px) était effacé et d'appliquer un mur de même hauteur que les 2 autres (120px) dans un div à l'intérieur de ce div masquant!
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.