我想在单词 WEBLOG 中映射字母 E 所以我使用了 CSS transform 属性但是如果我将文本包装在一个 span 中它不起作用但是它有效如果我使用 display: inline-block; 或 display: block;
那么转换不适用于内联元素？
Example 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 (有效，如果使用 display: block 或 display: inline-block)
最佳答案
在 the official W3 specifications 中回答在 transformable element 下:
an element whose layout is governed by the CSS box model which is either a block-level or 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 转换不适用于内联元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14883250/