Erstellen von 3D Button Flip Animationen mit CSS

s aufeinander, zwei für die Vorder- und Rückseite des Knopfes, und ein drittes zum Füllen der Tiefe in der Mitte. Wir setzen die drei Schaltflächenflächen in den .flipBtn Container, der als 3D-Schaltfläche fungiert, und platzieren die 3D-Schaltfläche in den .flipBtnWrapper Wrapper.

2. Grundlegende Stile mit CSS hinzufügen

Wir legen die width und Höheneigenschaften des Wrappers, der Schaltfläche und der Schaltflächenflächen fest und positionieren sie mithilfe der relativen / absoluten Positionierungstechnik.

 .flipBtnWrapper {Breite: 200px; Höhe: 200px; Position: relativ; } .flipBtn, .flipBtn_face {Breite: 100%; Höhe: 100%; Position: absolut; } 

3. Stylen Sie die 3 Tastenflächen

Wir fügen den vorderen und hinteren Schaltflächenflächen Hintergrundbilder hinzu und legen hinter beiden Bildern einen coolen linearen Farbverlauf fest. Der Trick dabei ist, dass Sie in CSS mehrere Bilder als Hintergrundbild für dasselbe Element festlegen können, und Sie können auch Farbverläufe als Hintergrundbilder deklarieren.

Die mittlere Fläche, .flipBtn_mid, erhält eine height von 20px, und zwischen der Vorder- und Rückseite entsteht ein gleicher Abstand von 20px. Letzteres erreichen wir mit der CSS-Funktion translateZ(), die ein Element entlang der z-Achse bewegt . Wir schieben die Rückseite um 10px zurück und bringen die Vorderseite um 10px nach vorne.

 .flipBtn_front {background-image: url ("image / css-3d-flip-button-animation-play.png"), linearer Farbverlauf (# FF6366 50%, # FEA56E); backface-visibility: versteckt; transform: translateZ (10px); } .flipBtn_back {background-image: url ("image / css-3d-flip-button-animation-pause.png"), linear-gradient (# FF6366 50%, # FEA56E); Hintergrundfarbe: blau; transform: translateZ (-10px); } .flipBtn_mid {Höhe: 20px; Hintergrundfarbe: # d5485a; transformieren: rotateX (90 Grad); oben: -10px; } 

Um den Raum zwischen den Vorder- und Rückseiten mit dem mittleren abzudecken, legen wir die mittlere Fläche flach über die x-Ebene des 3D-Raums mit Hilfe der transform: rotateX(90deg); Regel, die es senkrecht zu den vorderen und hinteren Schaltflächenflächen auf der y-Ebene macht.

Da die mittlere Seite flach über die x-Ebene gelegt wurde, geht ihr oberer Punkt auf der y-Achse 10px (die Hälfte ihrer Höhe) vom Original nach unten. Also, um es wieder hoch zu ziehen und seine Oberseite mit den zwei anderen top: -10px auszurichten, fügte ich die top: -10px Regel hinzu.

Ich habe die CSS-Eigenschaft backface-visibility für die Vorderseite verwendet. Wenn wir also die Schaltfläche umdrehen, ist die Rückseite der Vorderseite nicht sichtbar.

Bis jetzt 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 des Knopfes können Sie auch die anderen Gesichter sehen.

4. Drehen Sie den Knopf

Die CSS-Eigenschaft "transform-style" legt fest, ob die untergeordneten Elemente eines HTML-Elements flach angezeigt oder im 3D-Raum positioniert werden. Im folgenden Codeausschnitt ist der transform-style: preserve-3d; Regel gibt 3D-Volumen für unsere Schaltfläche, während die Eigenschaft transform: rotatexX() es um die x-Achse dreht.

 .flipBtn {transform-style: konservieren-3d; transformieren: rotateX (-120deg); } 

Beachten Sie, dass ich -120deg ausschließlich zu Demonstrationszwecken verwendet habe, da auf diese Weise die Funktionsweise der Schaltflächenrotation einfacher veranschaulicht werden kann.

Im nächsten Schritt werden wir es jedoch in -180deg, damit der Button vollständig -180deg .

5. Animieren der Schaltfläche

Zu diesem Zeitpunkt ist unsere 3D-Schaltfläche noch nicht animiert. Dies können wir mithilfe der transition . Wir verwenden die Eigenschaft transform für den ersten Wert, da dies die Eigenschaft ist, auf die der Übergangseffekt angewendet werden soll. Der zweite Wert ist die Dauer 2s .

Lassen Sie uns die Schaltfläche nur auf Hover drehen lassen. Verwenden .flipBtnWrapper:hover .flipBtn daher anstelle des Selektors .flipBtnWrapper:hover .flipBtn . Wie bereits erwähnt, ändern Sie auch den Wert von rotateX() auf -180deg, um den Button -180deg .

 .flipBtn {Übergang: transformiere 2s; transform-style: konservieren-3d; } .flipBtnWrapper: hover .flipBtn {umwandeln: rotateX (-180deg); } 

Beachten Sie, dass ich im Github Repo ein Kontrollkästchen für jede Schaltfläche hinzugefügt habe, um die Animation zu aktivieren :checked anstatt on :hover, so verhält es sich eher wie eine echte Schaltfläche. Ich habe auch vier verschiedene Tasten mit vier Flip-Richtungen (Oben → Unten, Unten → Oben, Rechts → Links und Links → Rechts), so dass Sie leicht verwenden können, was Sie wollen.

• Demo anzeigen
• Quelle herunterladen