How to rotate an image with CSS and HTML

Updated: 04/30/2020 by Computer Hope

Rotating an image on a web page is possible using a CSS (Cascading Style Sheets) rotate class, which is added to any <img> tag to rotate the image.

The Computer Hope logo being rotated.

Rotating an image using CSS

The CSS code needs to include transformations code for each major Internet browser, so 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);
}

The CSS code above should be added to a .css stylesheet file linked in your HTML (HyperText Markup Language). For example, if your CSS file is named site.css and in the same directory as your HTML file, you can include the following HTML in the <head> element:

<link rel="stylesheet" href="site.css">

Alternatively, you can include the CSS code inline, either in a style tag appearing before the image tag, or in the style attribute of the image tag.

Once the CSS code is applied to your .css file, stylesheet, or <style> tags, you can use the CSS class name in any of your image tags.

<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 example

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

Computer Hope logo