css3 - primer - selectores avanzados css hijos especificos

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

Question

Quería WEBLOG la letra E en la palabra WEBLOG así que utilicé la propiedad de transformación CSS pero no funciona si envuelvo el texto dentro de un lapso pero funciona si asigo la display: inline-block; o display: block;

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

Ejemplo 1 (no se transforma)

<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 usa display: block O display: inline-block )

Answer 1

Respondió aquí en las especificaciones oficiales W3 bajo elemento transformable :

un elemento cuyo diseño se rige por el modelo de caja CSS que es un elemento de nivel de línea atómico o de bloque , o cuya propiedad ''mostrar'' se computa a ''tabla-fila'', ''tabla-fila-grupo'', ''tabla- header-group '','' table-footer-group '','' table-cell ''o'' table-caption ''[CSS21]