title: Rotate icon with css on mouse hover
body: <p>After checking out I implemented below code but the effect is not happening, don't know where its lacking..</p>
  
  <pre><code>&lt;style&gt;
  
  
              .rotate {
                  -webkit-transition: -webkit-transform 0.4s ease-in-out;
                  -moz-transition: -moz-transform 0.4s ease-in-out;
                  -o-transition: -o-transform 0.4s ease-in-out;
                  -ms-transition: -ms-transform 0.4s ease-in-out;
                  transition: transform 0.4s ease-in-out;
                  cursor:pointer;
  }
              .rotate:hover { 
              color:#afafaf;
              -webkit-transform: rotateZ(360deg);
      -moz-transform: rotateZ(360deg);
       -ms-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
  
              }
              &lt;/style&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-lg-6 col-md-6 col-sm-12"&gt;
                  &lt;h2 align="center"&gt;&lt;a href="abc.php" class="rotate"&gt; &lt;icon class="icon icon-rocket icon-2x "&gt; &lt;/icon&gt; &lt;/a&gt; &lt;br /&gt;
                  Build your Resume &lt;/h2&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Edit: changed the rotate CLASS from icon to parent <h2></h2> </p>