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.


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">
    text-align: center;
    cursor: pointer;
    color: red;
    transition: 0.9s;
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);

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

Follow this video for complete guidance :

ALSO READ  Netflix clone design using HTML and CSS

Comments are closed.