Rotate image on hover using CSS transform Property

Updated on August 13, 2015     Kisan Patel

This example will show you how to rotate image when user hover it using css transform property.

The CSS transform property will take many attributes, but here we will take only rotation attribute.

All browsers support the transform property, with their own prefixes: -ms-transform for IE, -webkit-transform from Chrome and Safari.

Syntax:

tag{
  transform:rotate(10deg);
}

where,

1. rotate is the value of the attribute.
2. (10deg) specifies at what scale should the value be applied.

Here is the basic example of css transform proprty:

<!-- HTML -->
<div class="box">
 <img src="https://csharpcode.org/wp-content/uploads/2015/08/nature-teaser-sq-250x250.jpg">
</div>

<!-- Style -->
<style type="text/css">
.box{
   margin:20px auto;
   width:250px;
}
img:hover { 
   -ms-transform: rotate(10deg);
   -webkit-transform: rotate(10deg);
   transform: rotate(10deg);
}
</style>

Now you should see a rotated image when user hover on it on the browser, by 10 degrees: