*-transform：旋转在 Firefox 中有效，但在 chrome 中无效答案

【问题标题】：*-transform: rotate works in Firefox but not chrome*-transform：旋转在 Firefox 中有效，但在 chrome 中无效
【发布时间】：2023-04-05 08:31:01
【问题描述】：

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 中的元素，但不会旋转 chrome。
演示：http://jsfiddle.net/BuHGQ/（将鼠标悬停在箭头上）

如何才能让它在 Chrome 中运行？

【问题讨论】：

标签： css cross-browser

【解决方案1】：

试试这个：

.rotate { display: inline-block; }

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

【讨论】：

@dukevin 它可能可以用-*-transform-origin 或通过赋予它相同的高度和宽度来修复。
即使我检查过。如果元素具有display: block 或display: inline-block，它似乎可以工作。相当有趣的行为。
这取决于 Chrome 的版本。最新版本看起来不错。