So erstellen Sie 3D-Button-Flip-Animationen mit CSS
Animationen umdrehen sind beliebte CSS-Effekte, die zeigen sowohl vorne als auch hinten eines HTML-Elements durch Drehen von oben nach unten oder von links nach rechts (und umgekehrt). Sie haben zwei Dimensionen, sind aber in 3D noch kühler.
In diesem Beitrag zeige ich Ihnen, wie es geht Erstellen Sie einfache 3D-Schaltflächen, und Flip-Animationen hinzufügen zu ihnen.
Sie können das Ergebnis in der Demo unten sehen. Wenn Sie auf die Schaltflächen klicken, wird die beschriftete Flip-Animation ausgeführt.
1. Erstellen Sie den HTML-Code für die 3D-Schaltfläche
Um eine 3D-Schaltfläche (mit Top → Bottom Flip) zu erstellen, stapeln wir zuerst drei Wir setzen die Wir fügen den vorderen und hinteren Tastenflächen Hintergrundbilder hinzu und hinterlegen für beide einen coolen linearen Farbverlauf. Der Trick hier ist, dass Sie in CSS mehrere Bilder als Hintergrundbild für dasselbe Element festlegen können und auch Verläufe als Hintergrundbilder deklarieren können. Das mittlere Gesicht, Zu den Raum abdecken zwischen der Vorder- und Rückseite mit der mittleren, wir Legen Sie das mittlere Gesicht flach über die x-Ebene des 3D-Raums mit der Da die mittlere Fläche flach über die x-Ebene gelegt wurde, geht ihr oberer Punkt auf der y-Achse um 10px (die Hälfte ihrer Höhe) vom Original nach unten. Um es wieder nach oben zu ziehen und die Oberseite mit den beiden anderen Tastenflächen auszurichten, fügte ich das hinzu Ich habe die Bisher sehen Sie nur die Vorderseite auf dem Bildschirm, da die X-Ebene nicht sichtbar ist, und auf der Y-Ebene (Bildschirm) war die letzte Fläche die Vorderseite. Durch Drehen der Taste Sie können auch die anderen Gesichter sehen. Die CSS-Eigenschaft im Transformationsstil bestimmt, ob die untergeordneten Elemente eines HTML-Elements flach angezeigt oder im 3D-Raum positioniert werden. Im folgenden Code-Snippet wird der Beachten Sie, dass ich verwendet habe Im nächsten Schritt werden wir es jedoch ändern Zu diesem Zeitpunkt ist unsere 3D-Schaltfläche noch nicht animiert. Wir können dies mit der Lassen Sie uns die Schaltfläche nur beim Schweben drehen, also anstelle der Beachten Sie, dass im Github-Repo ich fügte ein Kontrollkästchen zu jeder Schaltfläche hinzu um die Animation anzufeuern .flipBtn Container, der als 3D-Button fungiert, und wir platzieren den 3D-Button im .flipBtnWrapper Verpackung.
2. Grundlegende Stile mit CSS hinzufügen
Breite und Höhe Eigenschaften des Wrappers, der Schaltfläche und der Tastenflächen und positionieren Sie sie mit der relativen / absoluten Positionierungstechnik. .flipBtnWrapper width: 200px; Höhe: 200px; Position: relativ; .flipBtn, .flipBtn_face width: 100%; Höhe: 100%; Position: absolut;
3. Gestalten Sie die 3 Tastenflächen
.flipBtn_mid, wird ein gegeben Höhe von 20px und einem gleichen Abstand von 20px zwischen Vorder- und Rückseite. Letzteres erreichen wir mit dem translateZ () CSS-Funktion das verschiebt ein Element entlang der Z-Achse. Wir drücken die Rückseite um 10px zurück und die Vorderseite um 10px nach vorne. .flipBtn_front background-image: URL ("image / css-3d-flip-button-animation-play.png"), linearer Farbverlauf (# FF6366 50%, # FEA56E); Sicht nach hinten: versteckt; transform: translateZ (10px); .flipBtn_back Hintergrundbild: URL ("image / css-3d-flip-button-animation-pause.png"), linearer Farbverlauf (# FF6366 50%, # FEA56E); Hintergrundfarbe: blau; transform: translateZ (-10px); .flipBtn_mid height: 20px; Hintergrundfarbe: # d5485a; Transformation: RotateX (90 Grad); oben: -10px; Transformation: RotateX (90 Grad); das regieren macht es senkrecht auf die vordere und hintere Schaltfläche auf der y-Ebene.oben: -10px Regel auch.Sicht auf die Rückseite CSS-Eigenschaft für die Vorderseite. Wenn Sie also die Schaltfläche drehen, wird die Rückseite der Vorderseite nicht sichtbar.
4. Drehen Sie die Taste
Verwandlungsstil: preserve-3d; Regel gibt unserem Knopf 3D-Volumen, während die transform: rotatexX () Diese Eigenschaft dreht sie um die x-Achse. .flipBtn transform-style: preserve-3d; Transformation: RotateX (-120deg);
-120 Grad Nur zu Demonstrationszwecken, da auf diese Weise die Funktionsweise der Knopfdrehung einfacher veranschaulicht werden kann.
-180 Grad um den Knopf vollständig umdrehen zu lassen.5. Animieren Sie die Schaltfläche
Übergang Eigentum. Wir nehmen das verwandeln Eigenschaft für den ersten Wert, da dies die Eigenschaft ist, für die der Übergangseffekt angewendet werden soll. Der zweite Wert ist die Dauer, 2s..flipBtn Selektor, lassen Sie uns verwenden .flipBtnWrapper: hover .flipBtn. Wie bereits erwähnt, ändern Sie auch den Wert von RotateX () zu -180 Grad um den Knopf herum drehen zu lassen. .flipBtn Übergang: Transformiere 2s; Verwandlungsstil: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
: geprüft anstatt auf :schweben, Auf diese Weise verhält es sich eher wie eine echte Taste. Ich habe auch vier verschiedene Schaltflächen mit vier Kipprichtungen (Oben → Unten, Unten → Oben, Rechts → Links und Links → Rechts) mitgeliefert, so dass Sie problemlos verwenden können, was Sie möchten.
