如何在跨度上使用 CSS3 变换？ [复制]

我有一个行内元素 (a <span>）嵌套在<h1>标签。我申请了一个转换财产给h1 ( skew所以它看起来像一个平行四边形）。
我需要转换 the <span>标记以“矫正”它及其文本。但这似乎只适用于 IE。

Here is 一个例子 http://jsfiddle.net/27JAP/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>

解释：
A <span>或链接（<a>) 是内联元素，并且变换属性不适用于内联元素.
这里是可变形元素列表 https://www.w3.org/TR/css3-transforms/#transformable-element 来自 CSS 转换模块级别 1.

解决方案：
将跨度的显示属性设置为inline-block or block。这将允许您将变换应用于 span 元素。
它也适用于其他内联元素，例如<a> <em> <strong>...（参见MDN 上的内联元素列表 https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#Elements).

这是一个演示<span>和链接<a>要素：

h1 {
  background: teal;
  padding: .25em .5em;
  margin: 1em;
  transform: skew(-15deg);
}
h1 span,
h1 a {
  color: #fff;
  display: inline-block;  /* <- ADD THIS */
  transform: skew(15deg);
}

<h1><span>This is a span in a title</span></h1>
<h1><a href="#">This is a link in a title</a></h1>