Question

我希望在单词E中镜像字母WEBLOG，所以我使用了CSS转换属性，但是如果我将文本包装在span中，它就不起作用但是如果我帮助{{1 }或display: inline-block;

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

display: block;

Example 2（工作，如果使用<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 */ }或display: block）

Answer 1

在the official W3 specifications下的transformable element下回答：

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

Answer 2

the specification的更新版本说：

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



所有布局均由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

what is a non-replaced inline element?

CSS转换不适用于内联元素

2 个答案: