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

Question

我在标签中嵌套了一个 内联元素 （a <span>）<h1>。我将 转换属性 应用于h1（偏斜，因此看起来像平行四边形）。 我需要 将span标签转换 为“ unskew”它及其文本。但这似乎仅在IE中有效。

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

说明：
A <span>是一个内联元素，并且 Transform属性不适用于内联元素 。 CSS转换模块1级上的可

解决方案：
将跨度的显示属性设置为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>