CSS 如何在跨度上使用 CSS3 转换？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24961795/
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
How can I use CSS3 transform on a span?
提问by jenhan
I have a inline element(a <span>) nested in a <h1>tag. I applied a transform propertyto the h1( skew so it looks like a parallelogram).
I need to transform the span tagto "unskew" it and its text. But this only seems to work in IE.
我有一个嵌套在标签中的内联元素(a <span>) <h1>。我对( skew 所以它看起来像一个平行四边形)应用了一个变换属性h1。
我需要将 span 标签转换为“unskew”它及其文本。但这似乎只适用于 IE。
Here is an exampleof the HTML and CSS:
以下是HTML 和 CSS的示例：
h1 {
background: #f00;
padding: .25em .5em;
text-align: right;
transform: skew(-15deg);
}
h1 span {
color: #fff;
transform: skew(15deg);
}<h1><span>This is a Title</span></h1>回答by web-tiki
Explanation:
A <span>is an inline elements and Transform property doesn't apply on inline elements.
List of transformable elementson the CSS Transforms Module Level 1.
说明：
A<span>是内联元素，并且Transform 属性不适用于内联元素。CSS Transforms Module Level 1 上的可
转换元素列表。
Solution:
Set the display property of the span to inline-blockor block. This will let you apply transforms to the span element.
It also works for other inline elements like <a> <em> <strong>... (see the list of inline elements on MDN).
解决方法：
将span的显示属性设置为inline-block或block。这将使您可以将变换应用于 span 元素。
它也适用于其他内联元素，例如<a> <em> <strong>...（请参阅MDN 上的内联元素列表）。
Here is a demo with the <span>element :
这是一个带有<span>元素的演示：
h1 {
background: #f00;
padding: .25em .5em;
text-align: right;
transform: skew(-15deg);
}
h1 span {
color: #fff;
display: inline-block; /* <- ADD THIS */
transform: skew(15deg);
}<h1><span>This is a Title</span></h1>回答by Anurag Srivastava
A little late here, but you can set
这里有点晚，但你可以设置
h1 span{
position:absolute;
}
Then use the CSS3 transform properties normally.
然后正常使用 CSS3 变换属性。
