CSS3转换不起作用

Question

我试图通过将它们旋转10度来转换我的菜单项.我的CSS适用于Firefox,但我无法在Chrome和Safari中复制效果.我知道IE不支持这个CSS3属性,所以这不是问题.

我使用了以下CSS:

li a {
   -webkit-transform:rotate(10deg);
   -moz-transform:rotate(10deg);
   -o-transform:rotate(10deg); 
}

有人可以建议我哪里出错吗？

谢谢.

Answer 1

这只是一个有根据的猜测,没有看到你的HTML/CSS的其余部分:

你申请display: block或display: inline-block到li a？如果没有,试试吧.

否则,请尝试应用CSS3转换规则li.

Answer 2

在基于webkit的浏览器(Safari和Chrome)中,-webkit-transform 内联元素会被忽略..设置display: inline-block;以使其工作.出于演示/测试目的,您可能还希望使用负角度或transformation-origin至少将文本旋转到可见区域之外.

Answer 3

就我而言，有一个CSS 动画在元素上运行，该元素的变换覆盖了我添加到元素的变换。

Answer 4

_{由于没有人参考相关文件:}

CSS转换模块1级 - 术语 - 可转换元素

可转换元素是以下类别之一的元素:

• 一个元素,其布局由CSS框模型控制,该模型是块级或原子内联级元素,或者其显示属性计算为表行,表行组,表标题组,表脚-group,table-cell或table-caption
• SVG名称空间中的一个元素,不受CSS框模型的控制,该框模型具有属性transform,'patternTransform'或gradientTransform.

在您的情况下,<a>元素是inline默认情况下.

更改display属性的值以inline-block将元素呈现为原子内联级元素,因此元素根据定义变为"可变形".

li a {
   display: inline-block;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -o-transform: rotate(10deg); 
   transform: rotate(10deg);
}

如上所述,这似乎只适用于-webkit基于浏览器,因为它似乎在IE/FF中工作.