La transformación CSS no funciona en elementos en línea

Quería reflejar la letra Een la palabra WEBLOG, así que usé la propiedad de transformación CSS, pero no funciona si envuelvo el texto dentro de un lapso, pero funciona si ajusto display: inline-block;odisplay: block;

Entonces, ¿las transformaciones no se aplican a los elementos en línea?

Ejemplo 1 (no se puede transformar)

<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 */
}

Ejemplo 2 (Funciona, si se usadisplay: blockOdisplay: inline-block)

Feb 15 '13 03:02 Mr. Alien

Respondido aquí en las especificaciones oficiales de W3 bajo elemento transformable :

un elemento cuyo diseño se rige por el modelo de cuadro CSS, que es un elemento de nivel de bloque o de nivel atómico en línea , o cuya propiedad 'display' se calcula como 'table-row', 'table-row-group', 'table- grupo de encabezado', 'grupo de pie de tabla', 'celda de tabla' o 'título de tabla' [CSS21]

Feb 14 '2013 20:02 Giacomo1968

La versión actualizada de la especificación dice:

Un elemento transformable es un elemento en una de estas categorías:

todos los elementos cuyo diseño se rige por el modelo de cuadro CSS, excepto los cuadros en línea no reemplazados , cuadros de tabla-columna y cuadros de grupo de tabla-columna [CSS2],

todos los elementos del servidor de pintura SVG, el elemento clipPath y los elementos renderizables SVG con la excepción de cualquier elemento descendiente de elementos de contenido de texto [SVG2].

Debemos tener en cuenta que no todos los inlineelementos no se pueden transformar sino solo los elementos en línea no reemplazados. elementos por lo que los elementos en línea reemplazados se pueden transformar.

Básicamente, podemos aplicar transformación a img, canvasetc. sin la necesidad de realizarlos inline-blockoblock

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>

Expandir fragmento

Más detalles sobre elementos reemplazados:

https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements

https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

¿Qué es un elemento en línea no reemplazado?

Jan 17 '2019 00:01 Temani Afif