title: CSS3 rotation when hover a font awesome icon?
body: <p>What is the right css to make a css3 rotation when hover a font awesome icon.</p>
  
  <p>I have this code to show a Fontawesome icon</p>
  
  <pre><code>&lt;span class="fa-stack fa-5x"&gt;
    &lt;i class="fa fa-circle fa-stack-2x"&gt;::before&lt;/i&gt;
    &lt;i class="fa fa-flag fa-stack-1x fa-inverse"&gt;::before&lt;/i&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Then I have this css to animate the icon</p>
  
  <pre><code>.fa-stack:hover{
  color: red;
  transition: 0.9s;
  transform: rotateY(180deg);
  }
  </code></pre>
  
  <p>The problem is that the animation is not done in a smothly movement and it returns to normal state even if the pointer is inside the icon. It seems to me that the problem are the <code>&lt;i&gt;</code> elements inside <code>.fa-stack</code></p>
  
  <p>I don't know how to show this in Fiddle.</p>
  
  <p>You can view it in <strong>JS Bin</strong>: <a href="http://jsbin.com/wohubuwaliho/1/" rel="noreferrer">http://jsbin.com/wohubuwaliho/1/</a></p>