In this article, we are going to rotate an icon on mouse hover using CSS transform.
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
DEMO
Full Source Code :
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{
text-align: center;
}
.fa-stack:hover{
cursor: pointer;
color: red;
transition: 0.9s;
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
</style>
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-rotate-right fa-stack-1x fa-inverse"></i>
</span>
Follow this video for complete guidance :
