CSS 转换不适用于内联元素

Question

我想在单词

E

中镜像字母

WEBLOG

所以我使用了CSS转换属性但是如果我将文本包装在一个跨度内它不起作用但是如果我assess

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

）

Answer 1

在W3官方规范中可变形元素下回答：

一个元素，其布局由 CSS 盒子模型控制，它是 块级或原子内联级元素，或者其 “显示”属性计算为“表行”、“表行组”、 “表头组”、“表脚组”、“表格单元格”或 “表格标题”[CSS21]

Answer 2

规范的更新版本说：

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

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

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

我们应该注意到，并不是所有的

inline

元素都不能被转换，只有non-replaced inline元素因此replaced 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

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