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

我有一个内联元素(a<span>)嵌套在<h1&gt标签。我将变换属性应用于h1(倾斜使其看起来像平行四边形)。
我需要将span标记转换为“unskew”它及其文本。但这似乎只适用于IE

下面是HTML和CSS的一个示例:

h1{
背景:#f00;
填充物:25em.5em;
文本对齐:右对齐;
变换:倾斜(-15度);
}
h1跨度{
颜色:#fff;
变换:倾斜(15度);
}
<h1&gt&书信电报;span>这是一个标题&lt/span&gt&lt/h1&gt

说明:
A<span&gt是一个内联元素,转换属性不适用于内联元素
CSS Transforms模块级别1上的可转换元素列表

解决方案:
将span的显示属性设置为内联块。这将允许您对span元素应用变换。
它也适用于其他内联元素,如<a&gt&书信电报;em&gt&书信电报;strong&gt。。。(请参阅MDN上的内联元素列表)

下面是一个演示,其中包含<span&gt元素:

h1{
背景:#f00;
填充物:25em.5em;
文本对齐:右对齐;
变换:倾斜(-15度);
}
h1跨度{
颜色:#fff;
显示:内联块;/*<-添加此*/
变换:倾斜(15度);
}
<h1&gt&书信电报;span>这是一个标题&lt/span&gt&lt/h1&gt

发表评论