CSS : Rotate icon on Hover

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 :