*-transform: rotate works in Firefox but not chrom

问题:

CSS looks as follows:

.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); 
}

Hovering over a <span class="rotate"> will rotate the element in Firefox but not chrome.
Demo: http://jsfiddle.net/BuHGQ/ (hover over the arrow)

What can be done so that it works in Chrome?

回答1:

Try this:

.rotate { display: inline-block; }

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