如何在跨度上使用CSS3转换? [英] How can I use CSS3 transform on a span?
问题描述
我在<h1>
标记中嵌套了一个内联元素(一个<span>
).我将 transform属性应用于h1
(偏斜,因此看起来像是平行四边形).
我需要转换span标签以使其倾斜"它及其文本.但这似乎仅在IE中有效.
I have a inline element (a <span>
) nested in a <h1>
tag. I applied a transform property to the h1
( skew so it looks like a parallelogram).
I need to transform the span tag to "unskew" it and its text. But this only seems to work in IE.
这是 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>
推荐答案
说明:
<span>
是内联元素,并且 Transform属性不适用于内联元素.
可转换元素列表 在CSS转换模块1级上.
Explanation:
A <span>
is an inline elements and Transform property doesn't apply on inline elements.
List of transformable elements on the CSS Transforms Module Level 1.
解决方案:
将范围的显示属性设置为inline-block
或block
.这将使您可以将转换应用于span元素.
它也适用于其他内联元素,例如<a> <em> <strong>
...(请参阅
Solution:
Set the display property of the span to inline-block
or 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>
元素的演示:
Here is a demo with the <span>
element :
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>
这篇关于如何在跨度上使用CSS3转换?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!