CSS transform doesn't work on inline elements

Question

I wanted to mirror letter E in the word WEBLOG so I used CSS transform property but it doesn't work if I wrap the text inside a span but it works if I assing display: inline-block; or display: block;

So transforms doesn't apply to inline elements?

Example 1 (Fails To Transform)

<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, If Used display: block OR display: inline-block)

Answer 1

Answered here in the official W3 specifications under transformable element:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose ‘display’ property computes to ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-cell’, or ‘table-caption’ [CSS21]