CSS 转换不适用于内联元素答案

【问题标题】：CSS transform doesn't work on inline elementsCSS 转换不适用于内联元素
【发布时间】：2013-01-30 18:03:03
【问题描述】：

我想在单词WEBLOG 中映射字母E，所以我使用了CSS 转换属性，但如果我将文本包装在一个跨度内，它不起作用，但如果我设置display: inline-block; 或display: block;，它就会起作用

所以转换不适用于内联元素？

<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 */
}

Example 2（有效，如果使用 display: block 或 display: inline-block）

【问题讨论】：

标签： css css-transforms

【解决方案1】：

在the official W3 specifications transformable element 下在这里回答：

一个元素，它的布局由 CSS 盒子模型控制，它是块级或原子内联级元素，或者其 ‘display’ 属性计算为 ‘table-row’, ‘table-row-group’, 'table-header-group'、'table-footer-group'、'table-cell' 或 '表格标题' [CSS21]

【讨论】：

所以文档没有明确提到 display 的值，它忽略了！ ?
@AlexanderSolonik 任何不是block 类型的display 都会被忽略。查看the list here，很容易找出具有block 级别display 设置的元素。

【解决方案2】：

the specification的更新版说：

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

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

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

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

所以基本上我们可以对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://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

what is a non-replaced inline element?

【讨论】：