Преобразование 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 ответ:
ответ здесь официальные спецификации W3 под трансформируемый элемент:
элемент, макет которого управляется моделью CSS box, которая является либо блок-уровень или атомарный элемент встроенного уровня, или чьи "дисплей" собственность вычисляет элементы ‘table-row’ и ‘таблица-строки-группа’, таблица-заголовок-группа", "таблица-колонтитул-группа", " таблица-ячейки, или 'table-caption’ [CSS21]