73

我想E在单词中镜像字母，WEBLOG所以我使用了 CSS 转换属性，但如果我将文本包装在一个跨度内它不起作用，但如果我 assingdisplay: 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: blockORdisplay: inline-block）

4

2 回答 2

63

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

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

于 2013-02-14T20:17:15.513 回答
6

规范的更新版本说：

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

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

  • 所有 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

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

于 2019-01-17T00:20:36.523 回答