How to rotate an image with CSS and HTML

Updated: 04/26/2017 by Computer Hope

Rotating an image on a web page is possible with the use of CSS code to create a rotate class, which you can then use with the <img> tag to rotate the image on the page.

Rotated image

Rotating an image using

The CSS code needs to include transformations code for each major Internet browser, so that the image is rotated in all browsers.

Below is an example of CSS code to rotate an image 180-degrees.

.rotateimg180 {
  -webkit-transform:rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

Once the CSS code has been applied to your .css file or your stylesheet you can use the CSS class name in any of your image tags as shown in the below code.

<img src="https://www.computerhope.com/logo-200.jpg" width="200" height="200" class="rotateimg180">

Tip: To rotate an image by another measure of degrees, change the "180" in the CSS code and <img> tag to the degree you desire.

Rotated image using above code

Below is an example of our logo using the above code, if your browser supports the CSS rotation the logo should appear to be rotated 180-degrees.

Computer Hope logo

Additional information