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

Posted 2023-03-06

【中文标题】*-transform：旋转在 Firefox 中有效，但在 chrome 中无效

【英文标题】：*-transform: rotate works in Firefox but not chrome

【发布时间】：2012-05-25 12:44:08

【问题描述】：

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 中运行？

【参考方案1】：

试试这个：

.rotate  display: inline-block; 

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

【讨论】：

@dukevin 它可能可以用-*-transform-origin 或通过赋予它相同的高度和宽度来修复。

即使我检查过。如果元素具有display: block 或display: inline-block，它似乎可以工作。相当有趣的行为。

这取决于 Chrome 的版本。最新版本看起来不错。