Flip/Spiegel ein Bild horizontal + vertikal mit CSS

Bilder sind eine wesentliche und unterhaltsame Anwendungskomponente. Sie tragen zum Design der Anwendung bei und geben ihr ein schönes Layout. Viele der von CSS angebotenen Eigenschaften sind auf verschiedene Weise von Vorteil. Insbesondere bietet es Funktionen, die die Bildeinstellung in eine beliebige Richtung ermöglichen, z.

Mit diesem Schreiben werden Sie ein Bild horizontal und vertikal mit CSS umdrehen oder spiegeln.

Wie man ein Bild horizontal und vertikal mit CSS umdrehen/spiegelt?

Es gibt verschiedene Methoden, mit denen die Bilder in CSS gedreht oder gedreht werden können. Wir werden Folgendes besprechen:

• Methode 1: Verwenden “Transformation: scale ()" Eigentum
• Methode 2: Verwenden “Transformation: rotate ()" Eigentum

Methode 1: Wie man ein Bild horizontal und vertikal mit „Transformation: scale ()“ umdrehen/spiegelt: scale () ”Eigenschaft?

Der "Transformation: scale ()Eigenschaft ändert das Bild in der 2D -Ebene. Der scale () gibt zwei Koordinatenwerte für die x-Achse und die y-Achse an. Die Menge an Skalierung in jede Richtung wird durch seine Koordinaten bestimmt. Der "Transformation: scalex ()Eigenschaft skaliert das Bild horizontal.

Beispiel

Fügen Sie zwei Bilder in die HTML -Datei hinzu. Der erste wird während des gesamten Beispiels als original gehalten. Während der andere mit den CSS -Eigenschaften angewendet wird:

• Der "Das Tag wird verwendet, um ein Bild aufzunehmen.
• Der "srcDas Attribut gibt die URL des Bildes an.
• Der "Alt”Wird verwendet, um den Text anzugeben, wenn das Bild nicht auf die Webseite geladen wird.
• Der "BreiteDas Attribut legt die Breite des Bildes fest.
• Der "Klasse”Wird mit einem Namen gesetzt, um auf das Bild in CSS zuzugreifen.

Hier ist der HTML -Code des Szenarios, wie bereits erwähnt:

Anfangs sieht die Webseite so aus:

Beispiel 1: Das Bild horizontal mit der Eigenschaft „Transform: scalex ()“ drehen

Fügen Sie in CSS das hinzu “Transformation: scalex ()Eigenschaft, um das Bild horizontal zu skalieren:

.Flip
Transformation: scalex (-1);

Ausgang

Beispiel 2: Das Bild mit der Eigenschaft „Transform: Scaley ()“ vertikal umdrehen

Verwenden Sie das Bild, um das Bild vertikal in CSS zu skalieren, das “Transformation: scaley ()" Eigentum:

Transformation: scaley (-1);

Ausgang

Methode 2: Wie man ein Bild horizontal und vertikal mit „Transformation: rotate ()“ umdrehen/spiegelt: rotate () ’Eigenschaft?

Das CSS “Transformation: rotate ()”Dreht das Bild um den Fixpunkt in einer 2D -Ebene. Die Funktion „rotatex ()“ dreht das Bild auf der x-Achse, und das „rotatey ()“ wird verwendet, um sich auf der y-Achse zu drehen.

Beispiel 1: Das Bild horizontal mit der Eigenschaft „Transform: rotatey ()“ drehen

Fügen Sie in CSS das hinzu “verwandeln”Eigenschaft mit dem Wert“rotatey ()" im "Flip”Klasse, um das Bild horizontal auf" umzudrehen "180Abschlüsse:

Transformation: Rotatey (180 Grad);

Ausgang

Beispiel 2: Das Bild mit der Eigenschaft „Transform: rotatex ()“ vertikal umdrehen

Fügen Sie die CSS hinzu "verwandeln”Eigenschaft mit dem Wert“rotatex ()Um das Bild vertikal umzudrehen:

Transformation: rotatex (180 Grad);

Ausgang

Wie man ein Bild vertikal oder horizontal beim Schwebeflächen umdrehen/spiegelt?

Um zu erfahren.

Schritt 1: Erstellen Sie eine HTML -Datei

Befolgen Sie zunächst die angegebenen Schritte zum Erstellen einer HTML -Datei:

• Füge hinzu ein ""Element und zuweisen Sie ihm eine Klasse"Flip-Box”.
• Fügen Sie in dieser Karte ein weiteres "“ mit der Klasse hinzu “Klappkarte”.
• Dann fügen Sie eine hinzu “"Tag mit dem"src","Alt", Und "Stil”Attribute.

Hier ist der HTML -Code:

Schritt 2: Stil „Flip-Box“ -Klasse

Der ".Flip-Box"Verwendet, um mit der Klasse auf den Container zuzugreifen"Flip-Box”:

.Flip-Box
Position: Relativ;
Breite: 300px;
Höhe: 300px;
Rand: Auto;

Die Eigenschaften, die im obigen Code -Snippet erwähnt werden, werden nachstehend beschrieben:

• “Position”Eigenschaft mit dem Wert“relativ”Legt die Position des Elements gemäß dem aktuellen Standort fest.
• Der "Breite" Und "HöheEigenschaften werden verwendet, um den Bereich des Elements festzulegen.
• “RandEigenschaft fügt Räume um das Element hinzu.

Schritt 3: Stil „Flip-Card“ -Klasse

Jetzt style the “Klappkarte" Klasse:

.Klappkarte
Position: absolut;
Breite: 100%;
Höhe: 100%;
Übergang: alle 0.5s Leichtigkeit;

Die Beschreibung der oben bereitgestellten Eigenschaften wird unten erwähnt:

• “Position" mit dem "absolutDer Wert legt den Standort des Elements relativ zum nahezu positionierten Element fest.
• “ÜbergangDie Eigenschaft passt die langsame Bewegung der Elemente innerhalb einer bestimmten Dauer ein.

Schritt 4: Stil „IMG“ Element

Der ""Element wird mit dem CSS gestaltet"Grenzradius" Eigentum:

img
Border-Radius: 10px;

Hier das "GrenzradiusDie Eigenschaft legt die Bildwunden als rund fest.

Schritt 5: Drehen Sie ein Bild vertikal im Schweb

Um das Bild auf Schwebungen zu drehen, das CSS “:schwebenDie Pseudoklasse wurde verwendet:

.Flip-Box: Schwebe .Klappkarte
Transformation: rotatex (180 Grad);

Ausgang

Schritt 6: Drehen Sie ein Bild horizontal beim Schwebedruck um

Der "Transformation: rotatey ()Eigenschaft kann verwendet werden, um das Bild horizontal umzudrehen:

.Flip-Box: Schwebe .Klappkarte
Transformation: Rotatey (180 Grad);

Ausgang

Wir haben die Ansätze zum Flip/Spiegel ein Bild horizontal und vertikal mit CSS zusammengestellt.

Abschluss

Um ein Bild in HTML, den CSS zu drehen “verwandeln”Eigenschaft mit den Werten“Skala()" Und "drehen()”Werden verwendet. Der "scalex ()" Und "rotatey ()Werden eingestellt, um das Bild horizontal umzudrehen. Der "scaley ()" Und "rotatex ()”Werden so eingestellt, dass das Bild vertikal umdreht. Um einen Schwebeffekt hinzuzufügen, das CSS “:schwebenDie Pseudoklasse wird angewendet. Dieser Beitrag hat mehrere Verfahren zum Umdrehen eines Bildes horizontal und vertikal in CSS erläutert.