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 is ignored on inline elements.。将display: inline-block;设为make it work。出于演示/测试目的，您可能还希望使用负角度或transformation-origin，以免文本旋转出可见区域。

Answer 3

_{由于没有人引用相关文档：}

CSS Transforms Module Level 1 - Terminology - Transformable Element

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


一个元素，其布局由CSS框模型控制，该模型是block-level或atomic inline-level element，或其display property计算到表行，表行组，表-header-group，table-footer-group，table-cell或table-caption

SVG命名空间中的一个元素，不受CSS框模型的控制，该模型具有属性transform，'patternTransform'或gradientTransform。

在您的情况下，<a>元素默认为inline。

将display属性的值更改为inline-block会将元素呈现为atomic inline-level elements，因此根据定义，元素将变为"transformable"。

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

如上所述，这似乎仅适用于基于-webkit的浏览器，因为它似乎无论如何都适用于IE / FF。

Answer 4

您是否专门尝试旋转链接？因为这样做on the LI tags似乎工作得很好。

According to Snook转换要求受影响的元素为block。他还有一些代码在那里使用过滤器为IE工作，如果你想添加它（虽然似乎对值有一些限制）。

Answer 5

在我的例子中，有一个 CSS 动画在元素上运行，它的转换覆盖了我添加到元素的转换。

Answer 6

不再需要

-webkit-transform

ms已经支持轮换（-ms-transform: rotate(-10deg);）

试试这个：

li a {
   ...

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
    }

CSS3转换不起作用

6 个答案: