CSS -Hintergrundbildflip
In diesem Leitfaden werden wir alle diese Flipping -Techniken durch die CSS -Eigenschaften durchführen. Hier lernen wir mit verschiedenen Eigenschaften etwas über den Bildflip in CSS kennen.
Beispiel 1:
Um das Bild in CSS umzudrehen, müssen wir den HTML -Code haben, in dem wir das Bild hinzufügen. Anschließend erstellen wir eine CSS -Datei, um die Eigenschaften so anzuwenden, dass unser Bild fließt. Wir können unser Bild in jede Richtung unserer Wahl umdrehen. Wir haben den Visual Studio -Code, in dem wir diese Beispiele durchführen müssen. Wir öffnen also die Datei und wählen die Sprache als "HTML" aus und erstellen diese HTML -Datei. Dann müssen wir hier einen Code erstellen, der im folgenden Bild angegeben ist. Wenn wir diesen Code vervollständigen, müssen wir ihn speichern.
Um die Überschrift oben auf der Seite anzuzeigen, fügen wir das hinzu
" Schild. Dann haben wir einen Absatz, und dieser Absatz wird neben der Überschrift angezeigt. Danach machen wir den Hauptcode, der den Bildcode hinzufügt. Wir fügen das Bild nach der Überschrift und dem Absatz hinzu. Wir verwenden das "" "Tag und in seinem" SRC ". Wir geben den Pfad oder den Namen des Bildes, das wir hinzufügen möchten. Wir setzen seinen Breitwert auf "400" und seinen Höhewert auf "300". Wir setzen diese Breite und Höhe auch in unserer CSS -Datei ein. Jetzt bewegen wir uns, um unsere CSS -Datei zu erstellen, in der wir die verschiedenen Eigenschaften verwenden, um unser Bild zu einem flippenden Bild zu machen.
Wir verwenden den Bild "Schwebe". Es wird verwendet, um das Bild auszuwählen, wenn sich der Cursor über das Bild bewegt. Die „Webkit-Transformation“ ist die CSS-Eigenschaft, mit der das Bild in 2-D und 3-D umgewandelt wird. Wir können unser Bild mit diesem Bild drehen. Der „Scalex“ wird verwendet, um das Bild in horizontaler Richtung zu drehen. Dieser Code dreht das Bild horizontal, wenn wir den Cursor über dieses Bild verschieben.
Dies ist das Originalbild, bevor Sie den Cursor über das Bild bewegen. Wenn wir über dieses Bild schweben, dreht es sich in horizontaler Richtung.
Das gedrehte Bild ist auch im Folgenden dargestellt:
Hier können Sie sehen, dass sich das Bild horizontal dreht. Das vorherige Bild ist das gedrehte Bild, nachdem der Cursor über das Bild bewegt wurde.
Beispiel #2:
Dies ist die HTML -Datei. Sie können sehen, dass wir hier in diesem Code ein Bild hinzugefügt haben. Wir haben das Haus benutzt.PNG ”Bild in diesem Beispiel.
Wir setzen das Bild "Breite" auf "500px" und das Bild "Höhe" auf "400px". Danach haben wir ein Bild "Schwebe", das das Bild auf der horizontalen Achse „transformiert“, wenn der Cursor über dieses Bild schwebt.
Ausgang:
Das vorherige Bild ist das Originalbild vor der Transformation auf der horizontalen Achse. Das folgende Bild ist das Bild nach der Transformation, wenn wir den Cursor über das Bild verschieben. Sie können den Unterschied zwischen dem vorherigen und dem folgenden Bild leicht erkennen.
Beispiel #3:
Hier sind die Werte „Breite“ und „Höhe“ gleich, und das Bild ist das gleiche. Aber wir drehen das Bild vertikal, nachdem wir über das Bild schweben. Wir verwenden also die "Transformation" und setzen sie auf "scaley (-1)", damit es unser Bild in vertikaler Richtung dreht.
Sehen Sie nun, dass sich das Bild in vertikaler Richtung dreht, wenn wir über dieses Bild schweben. Hier wird das Bild in einer verkehrten Richtung gezeigt, die sich nach dem Überschwebung vertikal dreht.
Beispiel Nr. 4:
In diesem Code verwenden wir die beiden Werte in der "Skala". Wir verwenden die "Transformation". In seiner "Skala" übergeben wir die beiden Werte "-1, -1", die das Bild in vertikalen und horizontalen Richtungen drehen. Wenn wir die Maus auf diesem Bild bewegen, dreht sie sich in beide Richtungen.
Sehen Sie, dass das Bild sowohl auf der vertikalen als auch auf der horizontalen Achse gedreht wird, wenn wir darüber schweben. Das vorherige Bild ist das Bild, nachdem er über das Originalbild schwebt.
Beispiel Nr. 5:
Dieses Beispiel unterscheidet sich von den vorherigen Beispielen. Wir erstellen die verschiedenen Div -Klassen mit den verschiedenen Namen. Die erste Div-Klasse heißt "Flip-Box". Die zweite Div-Klasse ist das "Flip-Box-Inner" nennt man. Und die dritte Div-Klasse heißt "Flip-Box-Front". Nachdem wir all diese Div -Kurse definiert haben, setzen wir ein Bild mit dem Namen „Myimage.JPEG ”. Wir erstellen dann einen weiteren „DIV“ mit einem "Flip-Box-Back" -Namen. Jetzt schreiben wir einige Absätze in dieser Div. Wir verwenden alle diese Div -Klassen in unserer CSS -Datei.
Wir verwenden den „Körper“ und die „Schriftfamilie“ zu „Arial“. Dann setzen wir die Breite und Höhe des Containers "Flip Box" auf "600px" bzw. "400px". Jetzt fügen wir den "Grenze" hinzu und setzen ihn in seiner Breite auf "1PX" mit einem "soliden" Typ, damit wir zeigen können, dass dieses Bild, wenn es flippt, aus dem Box geht, wenn wir den Cursor darüber bewegen. Wir fügen die "Perspektive" hinzu und setzen sie auf "1000px". Wir verwenden es, wenn wir dem Bild einen dreidimensionalen Effekt hinzufügen müssen.
Jetzt haben wir einen weiteren Behälter, der ein „Flip-Box-innerer“ ist. Dieser Behälter setzt die Position der Vorder- und Rückseite des Bildes. Wir setzen die "Position" auf "Relativ" und die "Breite" und "Höhe" auf "100px". Wir verwenden die Eigenschaft "Übergang", um die Animationsgeschwindigkeit zu steuern und sie auf "0) zu setzen.8s ”.
Danach verwenden wir das „Transform-Stil“, um das Bild im dreidimensionalen Raum zu rendern. Wir setzen es auf "Preserve-3D". Dann haben wir einen „Flip-Box“ -Bover. Wenn wir also über das Bild schweben, bewegt sie sich in horizontaler Richtung, da wir die „Transformation“ verwenden, um sie zu „drehen“ und sie auf „180 Grad“ einstellen. Wir haben die "Flip-Box-Front" und "Flip-Box-Back". Dann geben wir hier die Position. Wir setzen die „Position“ für beide auf „Absolute“. Die "Höhe" und "Breite" für beide Container sind auf "100px" bzw. "100px" eingestellt. Wir setzen auch die "Webkit-Backface-Sichtbarkeit" auf "versteckt". Diese Eigenschaft wird verwendet, wenn wir das Bild drehen und hier festlegen, ob der Benutzer die Rückseite des Bildes sieht oder nicht.
Hier verbergen wir es also, indem wir das "versteckte" Tag mit dieser Eigenschaft verwenden. Jetzt stylen wir die Vorderseite mit einem "Flip-Box-Front" -Container. Wir setzen die "Hintergrundfarbe" auf "#BBB" und die "Farbe" der Schriftart oder des Textes an "Schwarz". Schließlich stylen wir die Rückseite des Bildes, indem wir den "Flip-Box-Back" verwenden. Seine "Hintergrundfarbe" ist auf "grau" eingestellt, und die Schriftart "Farbe" ist auf "Weiß" eingestellt. Wir verwenden die Eigenschaft "Transformation" und setzen ihren Wert auf "Rotatey (180 °)".
In der Ausgabe haben wir die mehrere Bilder, in denen Sie die Drehung des Bildes bemerken können. Im letzten Bild wird auch hier die Rückseite des Bildes angezeigt. Sie können sehen, wie es sich dreht, wenn wir über dieses Bild schweben. Der gesamte Text, den wir im HTML -Code geschrieben haben.
Abschluss
In diesem Handbuch verwendeten wir das Bildflip -Konzept in CSS. Wir haben hier die verschiedenen sich überschneidenden Beispiele durchgeführt. Wir haben unser Bild in vertikaler Richtung oder horizontaler Richtung oder in beide Richtungen nach dem Umschwung umgedreht. Wir haben auch ein Beispiel durchgeführt, in dem wir unser Bild um 180 Grad drehen, wenn wir über das Bild schweben. Wir haben die CSS -Eigenschaften in allen Beispielen verwendet und alle Ausgänge in diesem Handbuch gemacht. Sie werden sehen, wie das Bild vertikal und horizontal dreht oder dreht.