Animation 3D Retournement Menu avec CSS
Construire des systèmes résilients sur AWS. Apprenez à concevoir et mettre en œuvre un résilients, hautement disponible, infrastructure tolérant aux pannes sur AWS.
La structure HTML se compose d'une liste avec des liens, que vous attendez d'un menu de navigation, mais il y a quelques éléments SPAN supplémentaires pour aider l'effet 3D:
A côté de l'élément de base A, une série de portées sont utilisés pour représenter les faces « avant » et « arrière » du bloc 3D au cours de l'animation. Chacun doit être donné le même texte que l'élément A.
Les centres d'animation autour des transitions et des transformations. L'un élément réel wont déplacer - l'élément SPAN parent sera. Chaque SPAN intérieur est initialisé à sa position et ne change pas. Chaque élément anime vers le haut et vers l'arrière, en utilisant les transformations CSS et des transitions CSS, bien que l'on est sur la rotation en arrière tandis que l'autre anime en place en vue.
Si vous voulez un aperçu de quelle manière les éléments avant et arrière se déplacent (que je vous recommande vivement de le faire), définissez l'un d'eux display: none et planer au-dessus de l'élément; vous verrez ce rôle de chacun dans l'animation.
Bonjour à tous,
Je jouais avec ce menu et je pensais que ce serait vraiment bien de mettre une image d'une planche de bois derrière l'image afin qu'elle ressemblerait à des parties de la planche se tordaient. J'ai essayé d'ajouter l'image d'arrière-plan aux éléments de liste qui fonctionne assez bien, mais l'image est transparente. Si je n'ai pas une couleur de fond ou de l'image derrière la liste des éléments de navigation effet 3D ne fonctionne pas bien. Est-ce que quelqu'un a des idées ou des suggestions quant à la façon dont je pourrais faire l'image transparente?
couleurs changeantes sur feuilles mobiles seraient plus impressionnant. Merci tho
J'espère que vous avez lu ce post, je voulais vous poser des questions sur la façon dont vous avez résolu le problème, savoir si vous avez utilisé les conteneurs et le CSS d'une manière particulière pour une raison particulière.
Je avais besoin d'une version plus simple (avec pas beaucoup de conteneurs ou que beaucoup de code CSS) donc je un peu modifié votre version en fonction de mes besoins.
Si vous pouviez jeter un oeil à ce que je vous serais reconnaissant de vos réflexions sur le code.