de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Erstellen von 3D Button Flip Animationen mit CSS

Flip-Animationen sind beliebte CSS-Effekte, die sowohl die Vorder- als auch die Rückseite eines HTML-Elements anzeigen, indem sie von oben nach unten oder von links nach rechts (und umgekehrt) gedreht werden. Sie sind zweidimensional, aber in 3D noch cooler.

In diesem Beitrag zeige ich Ihnen, wie Sie einfache 3D-Schaltflächen erstellen und ihnen Flip-Animationen hinzufügen .

Sie können das Ergebnis in der folgenden Demo sehen, wenn Sie auf die Schaltflächen klicken, werden sie die beschriftete Flip-Animation ausführen.

1. Erstellen Sie den HTML-Code für die 3D-Schaltfläche

Um eine 3D-Schaltfläche zu erstellen (mit Top → Bottom-Flip), stapeln wir zuerst drei

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

Scannen von Dokumenten und 2 weitere Funktionen für die Dropbox Mobile App

Scannen von Dokumenten und 2 weitere Funktionen für die Dropbox Mobile App

Wer sich auf Dropbox für Android oder die Paper-App von Dropbox verlässt, wird sich auf etwas freuen können, denn beide Apps werden Updates erhalten, die einige lang erwartete Funktionen mit sich bringen .Scannen von Dokumenten Mit Dropbox für Android bringt das Unternehmen endlich die Funktion zum Scannen von Dokumenten auf die Android-Plattform . Äh

(Tech- und Design-Tipps)

Frankendesign - Wenn alte Designs wieder zum Einsatz kommen

Frankendesign - Wenn alte Designs wieder zum Einsatz kommen

Kennst du die Geschichte von Frankensteins Monster? Ein verrückter Wissenschaftler versucht, eine lebende Kreatur mit Teilen aus einer Vielzahl von Individuen zu erschaffen. Designer haben oft viel gemeinsam mit dieser klassischen Geschichte, indem sie Elemente aus ihren alten Designs verwenden, um neue für ganz andere Kunden zu kreieren .D

(Tech- und Design-Tipps)