CSS-Transformation funktioniert nicht auf Inline-Elementen

Question

Ich wollte den Buchstaben E im Wort WEBLOG spiegeln, also habe ich CSS transform Eigenschaft verwendet, aber es funktioniert nicht, wenn ich den Text innerhalb einer Spanne umwandelt, aber es funktioniert, wenn ich display: inline-block; oder display: block;

Also Transformationen gilt nicht für Inline-Elemente?

Example 1 (Fails Transformation)

<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 (Works, falls verwendet display: block OR display: inline-block)

Answer 1

hier beantwortet in the official W3 specifications unter transformable element:

ein Element, dessen Layout geregelt durch das CSS-Box-Modell, welches entweder ist ein Blockebene oder atomic Inline-Ebene Element oder 'display' berechnet, deren Eigenschaft zu 'table-Reihe', 'table-row-group' 'table-Kopfgruppe', ‚Tabellen- footer-Gruppe‘, 'table-cell' oder 'table-caption' [CSS21]