Bild in HTML drehen
In diesem Artikel wird eine Methode zum Drehen eines Bilds in HTML vorgestellt.
Verwenden Sie die CSS-Eigenschaft transform, um ein Bild in HTML zu drehen
Die CSS-Eigenschaft transform impliziert die Änderung eines bestimmten Elements in unserem Code. Wir brauchen eine externe Ressource, in diesem Fall das Bild, das wir transformieren, um es zu transformieren. Diese Eigenschaft wendet eine 2D- oder 3D-Transformation auf ein Element an. Darüber hinaus gibt diese Eigenschaft auch die Berechtigung zum Drehen, Skalieren, Verschieben, Neigen usw. der Details. Es ändert auch den Koordinatenraum des visuellen CSS-Formatierungsmodells. Die Elemente, deren Layout dem CSS-Boxmodell unterliegt, können nur transformiert werden. Wir können die Eigenschaft transform auf eine Funktion rotate() setzen, die die Einheit in der Funktion zum Drehen eines Bildes in HTML erwähnt. Der Wert, um den das Bild gedreht werden soll, sollte in Klammern der Funktion angegeben werden. Die Einheit deg wird verwendet, um den Rotationswert anzugeben. Dazu können wir das Inline-CSS verwenden. Das CSS wird im <img>-Tag verwendet.
Fügen Sie beispielsweise ein normales Bild mit dem Tag <img> in HTML ein. Setzen Sie das Attribut src auf https://loremflickr.com/320/320. Fügen Sie dann für eine 90-Grad-Drehung das Bild ein und fügen Sie einige Stile hinzu. Setzen Sie im style-Attribut die Eigenschaft transform auf rotate(90deg). Fügen Sie dann ein <br>-Tag hinzu. Drehen Sie die Bilder ebenfalls auf 180deg und 360deg.
Das folgende Beispiel veranschaulicht eine Methode zum Drehen eines Bilds in einer Bildquelle in HTML. Wir haben das <img>-Tag so gestaltet, dass das eingefügte Bild mit der transform:rotate()-Eigenschaft gedreht werden kann. Wir haben das Originalbild eingefügt und das Bild auf 90, 180 und 360 gedreht. Die gewünschten Gradwerte können wir in die Funktion rotate() schreiben. Das zweite Bild im Beispiel dreht sich bis zur Hälfte der Achse. Das dritte Bild sieht auf dem Kopf aus, weil es auf 180 Grad gedreht ist. Wenn das Bild eine Drehung von 360 Grad abgeschlossen hat, sieht es aus wie das Originalbild. So können wir die Eigenschaft transform() und den Wert rotate() verwenden, um das Bild mit HTML und CSS zu drehen.
Beispielcode:
<html>
<body>
Original Image
<img src="https://loremflickr.com/320/320" /> <br>
90 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(90deg);"> <br>
180 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(180deg);"> <br>
360 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(360deg);"> <br>
</body>
</html>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn