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

Question

我有一个内联元素(<span>)嵌套在<h1> 中标签。我将 transform 属性应用于 h1 (skew 所以它看起来像一个平行四边形)。
我需要转换 <span>标记以“倾斜”它及其文本。但这似乎只在 IE 中有效。

这里是 an example 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

解释:
<span>或链接 ( <a>) 是内联元素，transform 属性不适用于内联元素。
这是 list of transformable elements 来自 CSS 转换模块级别 1。

解决方案:
将跨度的显示属性设置为 inline-block或 block .这将使您可以将转换应用到 span 元素。
它也适用于其他内联元素，如 <a> <em> <strong> ...(参见 list of inline elements on MDN)。

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