CSS3 rotation lorsque placez une police génial icône?

Qu'est-ce que le droit de css pour faire un css3 rotation lorsque placez une police génial icône.

J'ai ce code pour afficher une Fontawesome icône

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x">::before</i>
  <i class="fa fa-flag fa-stack-1x fa-inverse">::before</i>
</span>

Puis j'ai cette css pour animer l'icône

.fa-stack:hover{
color: red;
transition: 0.9s;
transform: rotateY(180deg);
}

Le problème est que l'animation ne se fait pas en un smothly mouvement et il revient à l'état normal, même si le pointeur est à l'intérieur de l'icône. Il me semble que le problème ce sont les <i> éléments à l'intérieur de .fa-stack

Je ne sais pas comment le montrer dans la Tripoter.

Vous pouvez l'afficher dans la JS Bin: http://jsbin.com/wohubuwaliho/1/

jsbin.com/wohubuwaliho/2/edit

OriginalL'auteur JPashs | 2014-09-11