CSS3转换失败

我试图通过将菜单项旋转10度来改变它们。我的 CSS 可以在 Firefox 中工作，但是我没能在 Chrome 和 Safari 中复制这种效果。我知道 IE 不支持这个 CSS3属性，所以这不是问题。

我使用了以下 CSS:

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

有人能告诉我哪里出错了吗？

谢谢。

201858 次浏览
小开
最佳答案

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

你有没有将 display: block或 display: inline-block应用到 li a? 如果没有，试试看。

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

小开

你是否特别试图只旋转链接? 因为这样做 在 LI 标签上似乎工作良好。

根据 Snook 转换需要受影响的元素被阻塞。他还有一些代码可以让 IE 使用过滤器来工作，如果你想添加它的话(尽管在值上似乎有一些限制)。

小开

在基于 webkit 的浏览器(Safari 和 Chrome)中，-webkit-transform 在内联元素上被忽略。。设置 display: inline-block;到 搞定它。为了演示/测试的目的，您可能还需要使用一个负角度或 transformation-origin，以免文本旋转出可见区域。

小开

不再需要 -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;
}
小开

因为没有人提到相关文件:

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

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

  • 一个元素，其布局由 CSS 框模型控制，该模型是 街区一级或 原子内嵌电平元件，或者其 显示属性显示属性计算为 table-row、 table-row-group、 table-header-group、 table-footer-group、 table-cell 或 table-caption
  • SVG 名称空间中的一个元素，不受 CSS 框模型的控制，该模型具有属性转换，‘ pattern nTransform’或 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 无论。

小开

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


提交答案