So implementieren Sie das Spiegeln von Bildern in CSS3

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/>

Rendering

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!