CSS转换不适用于内联元素

Question

我想E在单词中反映字母,WEBLOG所以我使用了CSS转换属性,但是如果我将文本包装在一个span中,它就不起作用但是如果我在分配display: 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框模型控制,该模型是块级或原子内联级元素,或者其"display"属性计算为"table-row","table-row-group","table- header-group','table-footer-group','table-cell'或'table-caption'[CSS21]

Answer 2

规范的更新版本说：

可变形元素是属于以下类别之一的元素：

• 布局受 CSS 框模型控制的所有元素，除了不可替换的内联框、表格列框和表格列组框 [CSS2]，

• 所有 SVG 绘制服务器元素、clipPath 元素和 SVG 可渲染元素，文本内容元素的任何后代元素除外 [SVG2]。

需要注意的是，并不是所有的inline元素都不能被转换，只有未被替换的内联元素才能被转换，因此被替换的内联元素可以被转换。

所以基本上我们可以应用改造img，canvas等等，而不需要使他们的inline-block或block

var all = document.querySelectorAll('.replaced');

for(var i=0;i<all.length;i++) {
 console.log(window.getComputedStyle(all[i],null).getPropertyValue("display"));
}

canvas {
  background:red;
}

.replaced {
  transform:rotate(20deg);
}

<img src="https://picsum.photos/200/200?image=1069" class="replaced">
<canvas class="replaced"></canvas>

有关替换元素的更多详细信息：

https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements

https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

什么是不可替换的内联元素？