Sommaire partiellement masqué - faites défiler !
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Rien n'interdit de créer des modèles d'animation basées sur des transforamtions 3D.
Il faut bien sûr que les zones soient aussi 3D.
Attention les zones d'animation de cette page ne sont pas 'responsive'.
Naviguer plutôt avec une tablette en mode paysage voire un ordinateur.
Les cartes subissent entre autres une rotation sur l'axe X de 180 degrés. Aussi elles apparaissent inversées un moment.
Le conteneur "zone1" est une zone 3D.
Le déclenchement de cette animation n'est pas automatique mais manuel.
Remarques :
Le carré est centré dans la zone.
En cliquant sur le bouton de commande, le carré grandit puis diminue tout en restant parfaitement centré.
Le conteneur "zone2" est une zone 3D avec point de fuite en son centre.
L'élément "carré est centré dans cette zone avant d'être animé et reste centré car le point de fuite est central.
Si le point de fuite était dans un coin l'effet serait très différent ...
Voir ci-dessous !
Selon vous, où est le point de fuite ?
Un avion survole la piste d'atterisage en rase-motte.
Le "background" de la boite "zone3" est une image vectorielle : piste.svg.
Le sujet de l'animation est aussi une image vectorielle SVG. Notez que le format SVG gère la transparence.
Le point de fuite se situe en haut à gauche.
L'animation consiste à "translater" l'avion sur l'axe Z.
Les fondeurs se déplacent vers la droite et le haut. Leur taille diminue progressivement.
"zone5" est une boite 3D avec point de fuite dans le coin haut droit.
Animation basée sur une translation sur les 3 axes. Notez que j'ai utilisé les raccourcis translate3D(x,y,z).
La taille des fondeurs diminue, non pas que je change d'échelle, mais en raison de la translation vers le point de fuite.
Les "sprites" de l'animation sont mis en forme et positionnés via la classe "fondeur".