Преобразование CSS не работает на встроенных элементах


Я хотел зеркальное письмо E в слове WEBLOG поэтому я использовал свойство преобразования CSS, но оно не работает, если я обертываю текст внутри промежутка, но оно работает, если я оцениваю display: 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: block или display: inline-block)

1 53

1 ответ:

ответ здесь официальные спецификации W3 под трансформируемый элемент:

элемент, макет которого управляется моделью CSS box, которая является либо блок-уровень или атомарный элемент встроенного уровня, или чьи "дисплей" собственность вычисляет элементы ‘table-row’ и ‘таблица-строки-группа’, таблица-заголовок-группа", "таблица-колонтитул-группа", " таблица-ячейки, или 'table-caption’ [CSS21]