La trasformazione CSS non funziona sugli elementi in linea

Question

Ho voluto rispecchiare la lettera E nella parola WEBLOG, quindi ho usato la proprietà di trasformazione CSS ma non funziona se avvolgo il testo all'interno di una span ma funziona se assegno display: inline-block; o display: block;

Quindi le trasformazioni non si applicano agli elementi in linea?

Example 1 (non riesce a trasformare)

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

Example 2 (Opere, se usato display: block O display: inline-block)

Answer 1

risposta qui in the official W3 specifications sotto transformable element:

un elemento il cui layout è governato dal modello di box CSS che è entrambi un a livello di blocco o elemento atomico a livello di riga, o la cui 'display' calcola per 'table-row', 'table-row-group', 'table-header-group', 'tavola- footer-group ',' table-cell ', o ' tabella-didascalia '[CSS21]