CSS变换不适用于内联元素 [英] CSS transform doesn't work on inline elements

问题描述

我想在 WEBLOG 中反映字母 E ，因此我使用CSS transform属性，但它不如果我在一个span内包装文本，但如果我判断 display：inline-block; 或 display：block;

I wanted to mirror letter E in the word WEBLOG so 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;

因此，变换不适用于内联元素？

a href =http://jsfiddle.net/4hwMm/ =noreferrer> 示例1 （无法转换）

Example 1 (Fails To Transform)

<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 （Works，If Used display：block c $ c> display：inline-block ）

Example 2 (Works, If Used display: block OR display: inline-block)

推荐答案

https://drafts.c​​sswg.org/css-transforms-1/rel =nofollow noreferrer>官方W3规范 transformable元素 ：

Answered here in the official W3 specifications under transformable element:

布局由CSS盒子模型管理的元素，它是块或原子行内元素的
或
' display'属性计算为'table-row'，'table-row-group'，
'table-header-group'，'table-footer-group'，'table-cell'或
'table-caption'[CSS21]

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变换不适用于内联元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！