CSS 转换不适用于内联元素 [英] CSS transform doesn't work on inline elements

问题描述

我想在单词 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]

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose ‘display’ property computes to ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-cell’, or ‘table-caption’ [CSS21]

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