How to rotate images on hover using css

To rotate an image on hover , we can use the css transform property with its value rotate() function.

img:hover{
  transform: rotate(180deg);
}

We will add the css transition property to the image. So that the image rotates 180 degrees with a smooth transition.

<style>
 img{
  transition: all 300ms ease-in-out;
 }
 img:hover{
  transform: rotate(180deg);
 }
</style>
  
  <img src="https://app.3schools.in/logo.png" id="logo">