Heute werde ich mit Ihnen teilen, wie Sie das Wissen in CSS3 nutzen, um eine Bildspiegelfunktion zu erstellen. Der Bildspiegeleffekt in CSS3 wird hauptsächlich durch das Festlegen von Übergangsanimationen und Transformationsrotationsanimationen erreicht
[Empfohlene Kurse: CSS3-Tutorial]
Fallanalyse
Die Idee des Bildumdrehungseffekts: Verwenden Sie zunächst die Positionierung, um zwei Bilder überlappen zu lassen, und müssen Sie außerdem das Bild auf der Rückseite ausblenden, damit der Effekt entsteht Es gibt nur ein Bild auf der Seite, aber wenn die Maus gedrückt wird, wird das Bild dahinter gedreht und vorne angezeigt, während das Bild, das ursprünglich vorne war, gedreht und hinten ausgeblendet wird.
(1) Position: Positionierung
relative: relative Positionierung
absolute: absolute Positionierung
(2) Backface-Visibility: Verstecke das gedrehte Div Rückseite des Elements
sichtbar: Die Rückseite ist sichtbar
versteckt: Die Rückseite ist unsichtbar
(3) Z-Index-Attribut
legt die Elemente fest Stapelreihenfolge: Je größer der eingestellte Wert, desto höher die Ebene und desto früher befindet sie sich auf der Seite
(4) Transition-Property: Legen Sie den Namen der CSS-Eigenschaft fest, die einen Übergangseffekt erfordert
keine: Kein Attribut erhält den Übergangseffekt
alle: Alle Eigenschaften erhalten den Übergangseffekt
Eigenschaft: Definieren Sie eine Liste von CSS-Eigenschaftsnamen, die Übergangseffekte anwenden. Die Liste ist getrennt durch Kommas.
(5) Übergangsdauer: wie viele Sekunden oder Millisekunden es dauert, um den Übergangseffekt abzuschließen
(6) Übergangszeitfunktion: die Geschwindigkeitskurve, um den Übergangseffekt abzuschließen
linear: Gleichmäßige Geschwindigkeit
Leichtigkeit: zuerst langsam, dann schnell und dann wieder langsam Gibt den Übergangseffekt an, der mit langsamer Geschwindigkeit beginnt, dann schnell wird und dann mit langsamer Geschwindigkeit endet (kubisch). -bezier(0,25,0,1,0,25,1)).
Kubik-Bezier(n,n,n,n): Definieren Sie Ihren eigenen Wert in der Kubik-Bezier-Funktion. Mögliche Werte sind Werte zwischen 0 und 1.
(7) Übergangsverzögerung: ob der Übergangseffekt verzögert wird und wann er beginnt
(8) Transformationsattribut: Das Element wendet eine 2D- oder 3D-Transformation an
Beispiel: rotateX( 180deg): 180 Grad entlang drehen 🎜>
Vollständiger Code:
Dieser Fall läuft im Chrome-Browser
<br/>
Dynamische Effekte
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich Ich hoffe, dass jeder ein gewisses Verständnis für das Umdrehen von Bildern hat.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Spiegeln von Bildern in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
