So drehen Sie ein Bild mit CSS und HTML

Das Drehen eines Bildes auf einer Webseite ist mit CSS-Code zum Erstellen einer Rotationsklasse möglich, die Sie dann mit verwenden können Tag, um das Bild auf der Seite zu drehen.

Bild drehen mit

Der CSS-Code muss Transformationscode für jeden großen Internetbrowser enthalten, damit das Bild in allen Browsern gedreht wird.

Im Folgenden finden Sie ein Beispiel für CSS-Code zum Drehen eines Bildes um 180 Grad.

 .rotateimg180 {-webkit-transform: drehen (180 Grad); -Moz-Transformation: drehen (180 Grad); -ms-transform: drehen (180 Grad); -o-transform: drehen (180 Grad); verwandeln: drehen (180 Grad); } 

Nachdem der CSS-Code auf Ihre .css-Datei oder Ihr Stylesheet angewendet wurde, können Sie den CSS-Klassennamen in einem Ihrer Image-Tags verwenden, wie im folgenden Code gezeigt.

Tipp: Um ein Bild um ein anderes Gradmaß zu drehen, ändern Sie die "180" im CSS-Code und Markieren Sie den gewünschten Grad.

Gedrehtes Bild mit obigem Code

Im Folgenden finden Sie ein Beispiel für unser Logo, das den obigen Code verwendet. Wenn Ihr Browser die CSS-Drehung unterstützt, sollte das Logo um 180 Grad gedreht erscheinen.