css - *-変換：回転はFirefoxで機能しますが、クロムでは機能しません

Question

CSSは次のようになります。

.rotate
{
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    -ms-transition: all .5s ease-in-out;
}
.rotate:hover
{
    -webkit-transform: rotate(90deg) scale(1); 
    -moz-transform: rotate(90deg) scale(1); 
    -o-transform: rotate(90deg) scale(1); 
    -ms-transform: rotate(90deg) scale(1); 
}

にカーソルを合わせると<span class="rotate">、Firefoxの要素は回転しますが、クロムは回転しません。
デモ： http： //jsfiddle.net/BuHGQ/（矢印にカーソルを合わせる）

Chromeで動作するようにするにはどうすればよいですか？

Answer 1

これを試して：

.rotate { display: inline-block; }

http://jsfiddle.net/y7nfD/1/