CSS3变换不起作用

Question

我想将我的菜单项旋转10度。 我的CSS在Firefox中有效，但是我未能在Chrome和Safari中复制该效果。 我知道IE不支持此CSS3属性，所以那不是问题。

我使用了以下CSS：

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

请问我哪里出错了？

谢谢。

- shruti

---

FYI，IE浏览器支持这个CSS3属性，你只需要加一个前缀：-ms-transform:rotate(10deg);。 - Joshua Pinter

可能是CSS transform doesn't work on inline elements的重复问题。 - mems

由于还没有人提到这一点，因为现在是2016年，请确保您将未添加前缀的CSS规则（例如 transform:rotate（10deg）; ）放在您选择支持的任何带前缀的版本之下。 - Maximillian Laumeister

Answer 1

在没有看到您的其他HTML/CSS代码的情况下，以下只是一种有根据的猜测：

您是否应用了display: block或display: inline-block到li a？如果没有，请尝试添加。

否则，请尝试将CSS3 transform规则应用于li而不是li a。

- thirtydot

---

请提供需要翻译的具体内容。 - Benjamin Ashbaugh

内联元素的行为像文本，而块级元素则像容器。您无法旋转文本字符，但可以旋转其容器。请参见此处，此处和此处。 （你知道<textarea>是一个内联元素吗？谁能想到呢...？） - crashwap

在我的情况下，我正在转换按钮上的 ::before，inline-block 对我无效，但是 flex 有效？？？ - Luke T O'Brien

不仅适用于旋转，而是适用于任何类型的变换。 - blissweb

Answer 2

在基于 Webkit 的浏览器（Safari 和 Chrome）中，-webkit-transform 不会对行内元素生效。设置 display: inline-block; 可以解决此问题。为了演示/测试目的，您可能还想使用负角度或 transformation-origin，以免文字旋转到可见区域之外。

- phihag

---

对我来说完美地运行，谢谢！我将其用于 <span>&copy</span> 以制作一个Copyleft符号。 - Elisabeth

@Elisabeth 这是一个非常优秀的应用程序。请注意，实体引用需要以分号结尾（例如 <span>&copy;</span>），虽然大多数浏览器都可以渲染两种方式。 - phihag

另外需要注意，如果你要为一个交互状态（比如 :hover 或 :active）应用转换效果，你需要在元素的默认状态下应用 inline-block，例如：a { display: inline-block; } a:active { transform: translateY(0.125em); }。仅将 inline-block 应用于交互状态似乎不起作用，在 Chrome 中至少是这样——Firefox 上运行良好。 - Paul d'Aoust

感谢指出“-webkit-transform”在内联元素上无法使用的事实。之前一直卡在这个问题上。 - pbojinov

@phihag 说得好，你帮我避免了一些大问题！值得注意的是，这可能会导致您的元素在动画运行后消失。 - texelate

Answer 3

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

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

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

• 由CSS盒子模型控制布局的元素，可以是块级或原子内联级元素，或其显示属性计算为table-row、table-row-group、table-header-group、table-footer-group、table-cell或table-caption
• SVG命名空间中未受CSS盒子模型控制且具有transform、patternTransform或gradientTransform属性的元素。

在你的情况下，<a>元素默认为内联元素。

将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中似乎可以工作。

- Josh Crozier

Answer 4

在我的情况下，该元素上运行了一个CSS动画，它的变换覆盖了我添加到该元素的变换。

- Jonathan

---

需要更多的投票！这正是我的问题。我最终将动画元素包装在容器中，然后将变换应用于容器而不是元素本身。 - Rich

我刚刚添加了 !important，它起作用了，所以问题确实来自你提到的地方。谢谢！ - kodfire

Answer 5

你是想只旋转链接吗？因为在 LI 标签上 这样做 似乎可以正常工作。

根据 Snook 的说法，变换需要受影响的元素为块级元素。他还提供了一些代码来使用滤镜使其在 IE 中工作，如果你想添加它（尽管存在某些值的限制）。

- Su'

Answer 6

-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;
    }

- pdj

---

今天在我的测试中，我注意到在Chrome中确实不再需要“-webkit-transform”。然而，在Safari 8中仍然需要它。 - John Slegers

-sand-transform是用来做什么的？简短的谷歌搜索没有找到任何结果。 - Pete

谷歌搜索“CSS Sandpaper”，这与问题相关，可能会使事情变得更容易。它是一种hack技术，为旧版本的IE实现了标准CSS transform的支持。 - Pedro Justo