CSS 转换不适用于内联元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14883250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS transform doesn't work on inline elements
提问by Mr. Alien
I wanted to mirror letter Ein the word WEBLOGso I used CSS transform property but it doesn't work if I wrap the text inside a span but it works if I assing display: inline-block;or display: block;
我想E在单词中镜像字母，WEBLOG所以我使用了 CSS 变换属性，但如果我将文本包裹在一个跨度内则它不起作用，但如果我使用 assingdisplay: inline-block;或display: block;
So transforms doesn't apply to inline elements?
所以转换不适用于内联元素？
Example 1(Fails To Transform)
示例 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 */
}
Example 2(Works, If Used display: blockOR display: inline-block)
示例 2（有效，如果使用display: blockORdisplay: inline-block）
采纳答案by JakeGould
Answered here in the official W3 specificationsunder transformable element:
在可转换元素下的官方 W3 规范中在这里回答：
an element whose layout is governed by the CSS box model which is either a block-levelor atomic inline-level element, or whose ‘display' property computes to ‘table-row', ‘table-row-group', ‘table-header-group', ‘table-footer-group', ‘table-cell', or ‘table-caption' [CSS21]
一个元素，其布局由 CSS 框模型控制，该模型是块级或原子内联级元素，或者其 'display' 属性计算为 'table-row'、'table-row-group'、'table- header-group'、'table-footer-group'、'table-cell' 或 'table-caption' [CSS21]
回答by Temani Afif
The updated version of the specificationsays:
规范的更新版本说：
A transformable element is an element in one of these categories:
all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],
all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].
可变形元素是属于以下类别之一的元素：
布局由 CSS 框模型控制的所有元素，除了不可替换的内联框、表格列框和表格列组框 [CSS2]，
所有 SVG 绘制服务器元素、clipPath 元素和 SVG 可渲染元素，文本内容元素的任何后代元素除外 [SVG2]。
We should note that not all the inlineelements cannot be transformed but only the non-replaced inlineelements thus the replaced inlineelements can be transformed.
需要注意的是，并不是所有的inline元素都不能被转换，只有未被替换的内联元素才能被转换，因此被替换的内联元素可以被转换。
So basically we can apply transformation to img, canvas, etc without the need of making them inline-blockor block
所以基本上我们可以应用改造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>More details about replaced elements:
有关替换元素的更多详细信息：
https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements
https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements
https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
