Преобразование 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, которая либо блочный уровень или атомный элемент линейного уровня, или чей 'Свойство display вычисляет' table-row, 'table-row-group, "Table-header-group", "table-footer-group", "table-cell" или 'Table-caption [CSS21]

Ответ 2

Обновленная версия спецификации гласит:

Трансформируемый элемент - это элемент одной из следующих категорий:

  • все элементы, расположение которых регулируется блочной моделью CSS, за исключением незаменяемых встроенных блоков, блоков столбцов таблицы и блоков групп столбцов таблицы [CSS2],

  • все элементы сервера рисования SVG, элемент clipPath и элементы визуализации SVG, за исключением любого элемента-потомка элементов текстового содержимого [SVG2].

Мы должны отметить, что не все inline элементы не могут быть преобразованы, а только незаменяемые встроенные элементы, поэтому замененные встроенные элементы могут быть преобразованы.

Таким образом, в основном мы можем применить преобразование к 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>