CSS转换不适用于内联元素

Question

我想E在单词中镜像字母，WEBLOG所以我使用了CSS变换属性，但是如果我将文本包裹在一个范围内则无法使用，但是如果我选择了assdisplay: inline-block;或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（Works，如果使用display: blockORdisplay:inline-block）

Answer 1

在官方W3规范中，在可转换元素下回答：

一个元素，其布局由CSS框模型控制，该CSS框模型可以是 块级 或 原子内联级元素 ，或者其“ display”属性可以计算为“ table-row”，“ table-row-group”，“ table-标头组”，“表页脚组”，“表单元格”或“表标题” [CSS21]