CSS 转换不适用于内联元素

问题描述

我想在单词 WEBLOG 中镜像字母 E 所以我使用了 CSS 转换属性但是如果我将文本包裹在一个跨度内它不起作用但它起作用如果我使用 display: inline-block; 或 display: block;

I wanted to mirror letter E in the word WEBLOG so I used CSS transform property but it doesn't work if I wrap the text inside a span but it works if I assing display: inline-block; or display: block;

所以转换不适用于内联元素?

示例 1(无法转换)

<h1>W<span>E</span>BLOG</h1>

h1 span {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
}

示例 2(有效，如果使用 显示:块 OR display: inline-block)

推荐答案

在 官方的这里回答可转换元素下的W3规范:

一个元素，其布局由 CSS 框模型控制，它是块级或原子内联级元素，或‘display’ 属性计算为 ‘table-row’, ‘table-row-group’,‘table-header-group’, ‘table-footer-group’, ‘table-cell’, 或‘表格标题’ [CSS21]

这篇关于CSS 转换不适用于内联元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！