如何在跨度上使用CSS3变换？

Question

我有一个嵌套在标签中的内联元素(a <span>)<h1>.我将变换属性应用于h1(倾斜使其看起来像平行四边形).
我需要将span标记转换为"unskew"它及其文本.但这似乎只适用于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>

Answer 1

Explanation:
A <span>是内联元素,Transform属性不适用于内联元素.CSS转换模块级别1上的可
转换元素列表 .

解决方案:
将span的display属性设置为inline-block或block.这将允许您将变换应用于span元素.
它也适用于其他内联元素,如<a> <em> <strong>...(请参阅MDN上的内联元素列表).

这是一个带<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>

Answer 2

这里有点晚了，但你可以设置

h1 span{
   position:absolute;
}

然后正常使用 CSS3 变换属性。演示：

h1 span{
   position:absolute;
}

h1 {
  background: #f00;
  padding: .25em .5em;
  text-align: right;
  transform: skew(-15deg);
  height: 40px;
}

h1 span {
  position: absolute;
  left: 20px;
  color: #fff;
  transform: skew(15deg);
}