CSS3转换不起作用

我正在尝试通过将菜单项旋转10度来对其进行转换。我的CSS在Firefox中可以使用，但是我无法在Chrome和Safari中复制效果。我知道IE不支持此CSS3属性，所以这不是问题。

我使用以下CSS：

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

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

谢谢。

这只是一个有根据的猜测，而没有看到其余的HTML / CSS：

您申请了display: block还是申请display: inline-block了li a？如果没有，请尝试。

否则，请尝试应用CSS3转换规则li。

在基于Webkit的浏览器（Safari和Chrome）中，-webkit-transform 内联元素被忽略。。设置display: inline-block;以使其工作。为了演示/测试，您可能还想使用负角，transformation-origin以免将文本旋转到可见区域之外。

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

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

可变形元素是以下类别之一的元素：

• 一个元素，其布局由CSS框模型控制，该CSS框模型可以是块级或原子内联级元素，或者其display属性可以计算为table-row，table-row-group，table-header-group，table-footer -group，表单元格或表标题
• SVG名称空间中的一个元素，不受具有转换属性，“ patternTransform”或“ gradientTransform”的CSS盒模型的控制。

在您的情况下，默认情况下为<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中工作。

您是否专门尝试仅旋转链接？因为在LI标签上执行此操作似乎正常。

根据Snook变换，要求将受影响的元素块化。他还提供了一些代码，使您可以使用过滤器在IE上实现此功能，如果您愿意添加它的话（尽管对值似乎有一些限制）。

-webkit-transform 不再需要

毫秒已支持旋转（-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;
    }