CSS转换对内联元素不起作用

提问者：小点点

CSS转换对内联元素不起作用

我想在单词weblog中镜像字母e，因此我使用了CSS transform属性，但如果我将文本换行到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（工作，如果使用display:block或display:inline-block)

共2个答案

匿名用户

在可转换元素下的官方W3规范中得到了回答:

其布局由CSS框模型控制的元素，CSS框模型是块级或原子内联级元素，或者其“display”属性计算为“table-row”，“table-row-group”，“table-header-group”，“table-footer-group”，“table-cell”或“table-caption”[CSS21]

匿名用户

该规范的更新版本说:

可转换元素是以下类别中的元素:

其布局受CSS框模型控制的所有元素（非替换内联框，表列框和表列组框[CSS2]除外），

所有SVG paint server元素，clipPath元素和SVG renderable元素，但文本内容元素[SVG2]的任何子代元素除外。

我们应该注意，并不是所有的inline元素都不能被转换，而是只有未替换的内联元素，因此替换的内联元素可以被转换。

所以基本上我们可以对img，canvas等应用转换，而不需要使它们成为内联块或块

null

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>