Animierte 3D-Flipping-Menü mit CSS
Der Aufbau Resilient-Systeme auf AWS. Erfahren Sie, wie zu entwerfen und eine elastische, hochverfügbare, fehlertolerante Infrastruktur auf AWS zu implementieren.
Die HTML-Struktur besteht aus einer Liste mit Links, wie Sie von einem Navigationsmenü erwarten würden, aber es gibt ein paar zusätzlichen SPäNE Elemente den 3D-Effekt zu unterstützen:
Neben dem Grunde A-Elemente, eine Reihe von Span verwendet, um die „vorne“ und „hinten“ Gesichter der 3D-Box während der Animation darzustellen. Jeder sollte den gleichen Text wie das A-Element angegeben werden.
Die Animation dreht sich um Übergänge und Transformationen. Das tatsächliche Ein Element würde nicht bewegen - das übergeordnete Element SPAN wird. Jede innere SPAN wird in seine Position initialisiert und ändert sich nicht. Jedes Element belebt nach oben und hinten, CSS-Transformationen und CSS-Übergänge verwendet wird, wenn ein auf der Drehung zurück, während die andere in der Ansicht animiert werden.
Wenn Sie in die Wege zu einen Blick wollen bewegen sich die vorderen und hinteren Elemente (was ich sehr empfehlen Sie tun), stellen Sie einen von ihnen zu display: none und schweben über dem Element; Sie werden sehen, welche Rolle jeder in der Animation spielt.
Hallo, alle miteinander,
Ich war mit diesem Menü zu spielen und ich dachte, es wäre wirklich nett zu sein, ein Bild von einem Holzbrett hinter dem Bild zu setzen, so dass es wie Teile der Planke aussehen würde wurden verdrehen. Ich habe versucht, das Hintergrundbild auf die Listenelemente hinzugefügt, die recht gut funktioniert, aber das Bild ist nicht nahtlos. Wenn ich nicht eine Hintergrundfarbe oder das Bild hinter den Listenelementen der Navigation 3D-Effekt funktioniert nicht gut haben. Hat jemand irgendwelche Ideen oder Vorschläge, wie ich das Bild nahtlos machen könnte?
wechselnde Farben auf Flip wären genial. dank tho
Ich hoffe, dass Sie diesen Artikel lesen, wollte ich Dich über die Art und Weise fragen Sie das Problem gelöst, zu wissen, ob Sie die Behälter verwendet und die CSS in einer bestimmten Art und Weise für einen bestimmten Grund.
Ich brauchte eine einfachere Version (mit nicht so viele Container oder so viel CSS-Code), damit ich ein wenig verändert Ihre Version meine Bedürfnisse auf.
Wenn Sie einen Blick auf sie nehmen könnte, würde ich Ihre Gedanken über den Code zu schätzen wissen.