Html CSS3 转换不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4919963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transform not working
提问by shruti
I am trying to transform my menu items by rotating them 10 degrees. My CSS works in Firefox but I've failed to replicate the effect in Chrome and Safari. I know IE doesn't support this CSS3 property so that's not a problem.
我试图通过将它们旋转 10 度来转换我的菜单项。我的 CSS 可以在 Firefox 中使用，但我无法在 Chrome 和 Safari 中复制效果。我知道 IE 不支持这个 CSS3 属性，所以这不是问题。
I used following CSS:
我使用了以下 CSS：
li a {
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);
}
Could anybody please suggest where I am going wrong?
有人可以建议我哪里出错了吗？
Thanks.
谢谢。
回答by thirtydot
This is merely an educated guess without seeing the rest of your HTML/CSS:
这只是一个有根据的猜测，没有看到您的 HTML/CSS 的其余部分：
Have you applied display: blockor display: inline-blockto li a? If not, try it.
你申请过display: block或display: inline-block申请过li a吗？如果没有，请尝试一下。
Otherwise, try applying the CSS3 transform rules to liinstead.
否则，请尝试将 CSS3 转换规则应用于li。
回答by phihag
In webkit-based browsers(Safari and Chrome), -webkit-transformis ignored on inline elements.. Set display: inline-block;to make it work. For demonstration/testing purposes, you may also want to use a negative angle or a transformation-originlest the text is rotated out of the visible area.
在基于 webkit 的浏览器（Safari 和 Chrome）中，-webkit-transform内联元素被忽略。. 设置display: inline-block;以使其工作。出于演示/测试目的，您可能还想使用负角度或transformation-origin以免文本旋转出可见区域。
回答by Josh Crozier
Since nobody referenced relevant documentation:
由于没有人参考相关文档：
CSS Transforms Module Level 1 - Terminology - Transformable Element
A transformable element is an element in one of these categories:
- an element whose layout is governed by the CSS box model which is either a block-levelor atomic inline-level element, or whose display propertycomputes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption
- an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform.
可变形元素是属于以下类别之一的元素：
In your case, the <a>elements are inlineby default.
在您的情况下，<a>元素是inline默认的。
Changing the displayproperty's value to inline-blockrenders the elements as atomic inline-level elements, and therefore the elements become "transformable"by definition.
更改display属性的值以inline-block将元素呈现为原子内联级元素，因此元素根据定义变得“可转换”。
li a {
display: inline-block;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}
As mentioned above, this only seems to applicable in -webkitbased browsers since it appears to work in IE/FF regardless.
如上所述，这似乎仅适用于-webkit基于浏览器的浏览器，因为无论如何它似乎都可以在 IE/FF 中工作。
回答by Su'
Are you specifically trying to rotate the links only? Because doing it on the LI tagsseems to work fine.
您是否专门尝试仅旋转链接？因为在 LI 标签上这样做似乎工作正常。
According to Snooktransforms require the elements affected be block. He's also got some code there to make this work for IE using filters, if you care to add it on(though there appears to be some limitation on values).
根据 Snook变换要求受影响的元素是块。如果您愿意添加它，他也有一些代码可以使用过滤器为 IE 工作（尽管似乎对值有一些限制）。
回答by pdj
-webkit-transformis no more needed
-webkit-transform不再需要
ms already support rotation ( -ms-transform: rotate(-10deg);)
ms 已经支持旋转 ( -ms-transform: rotate(-10deg);)
try this:
尝试这个：
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;
}
