CSS3 转换不起作用答案

【问题标题】：CSS3 transform not workingCSS3 转换不起作用
【发布时间】：2011-06-22 15:23:39
【问题描述】：

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

我使用了以下 CSS：

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

谁能建议我哪里出错了？

谢谢。

【问题讨论】：

仅供参考，IE 确实支持这个 CSS3 属性，你只需要一个前缀：-ms-transform:rotate(10deg);
CSS transform doesn't work on inline elements的可能重复
由于还没有人提到这一点，因为现在是 2016 年，所以请确保将 CSS 规则的无前缀版本（例如 transform: rotate(10deg);）放在您选择支持的任何前缀版本之下。

标签： html css

【解决方案1】：

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

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

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

【讨论】：

我爱你！ display: inline-block 提供了帮助。
解释会很有帮助:)
解释：内联元素的行为类似于文本，而块元素的行为类似于容器。您不能旋转文本字符，但可以旋转它们的容器。请参阅 this 和 this 和 this。 （你知道是一个内联元素吗？Whodathunk...？）
在我的例子中，我在按钮上转换了 ::before，inline-block 对我不起作用，但 flex 起作用？？？
不只是旋转，这适用于任何类型的变换。

【解决方案2】：

在基于 webkit 的浏览器（Safari 和 Chrome）中，-webkit-transformis ignored on inline elements.。将display: inline-block; 设置为make it work。出于演示/测试目的，您可能还需要使用负角或transformation-origin，以免文本旋转到可见区域之外。

【讨论】：

非常适合我，谢谢！我在 &copy 上使用它来制作 copyleft 符号。
@Elisabeth 这是一个很棒的应用程序。请注意，实体引用需要以分号结尾（如<span>&copy;</span>），尽管大多数浏览器都以两种方式呈现。
另一个注意事项：如果您将转换应用于交互状态（例如，:hover 或 :active），您需要将 inline-block 应用于默认状态的元素，例如a { display: inline-block; } a:active { transform: translateY(0.125em); }。仅将inline-block 应用于交互状态似乎不起作用。至少在 Chrome 中——它在 Firefox 中运行良好。
感谢您指出-webkit-transform 不适用于内联项目。以前一直卡在这个上。
@phihag 太好了，你帮我省了很多麻烦！值得注意的是，这可能会导致您的元素在动画运行后消失。

【解决方案3】：

_{由于没有人参考相关文档：}

CSS Transforms Module Level 1 - Terminology - Transformable Element

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

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

SVG 命名空间中的一个元素，不受具有属性 transform、“patternTransform”或 gradientTransform 的 CSS 框模型的约束。

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

【讨论】：

【解决方案4】：

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

【讨论】：

这需要更多的投票！这正是我的问题。我最终将动画元素包装在一个容器中，然后将转换应用于容器。

【解决方案5】：

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

According to Snook 转换要求受影响的元素是块。他还有一些代码可以使用过滤器在 IE 上工作，如果您愿意添加它（尽管值似乎有一些限制）。

【讨论】：

【解决方案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;
    }

【讨论】：

在我今天的测试中，我注意到 Chrome 中确实不再需要 -webkit-transform。但是，在 Safari 8 中仍然需要它。
-sand-transform 是干什么用的？简短的 Google 搜索一无所获。
google 'CSS Sandpaper' 这与问题相关，可能会使事情变得更容易。它是一个 hack，实现了对旧版本 IE 的标准 CSS 转换的支持