div can rotate, span can't rotate but it can animate the transformation

Question

I have attached code for three objects in html. Please have a look at the SO code playground or here: http://jsfiddle.net/kr34643L/

The first one (id1) is a div and I can rotate it via css3.

The second one (id2) is a span and it is not possible to rotate it in the same way.

But it is possible to rotate a span (id3) while doing the transition. Only it doesn't stay in that position.

I have seen answers about setting display to block or inline-block, but I honestly don't understand why I have to change the display style. Especially when the transition works well but only doesn't keep the position at the end.

var id1 = document.getElementById('id1');
var id2 = document.getElementById('id2');
var id3 = document.getElementById('id3');

var rotate1 = 0;
var rotate2 = 0;
var rotate3 = 0;

id1.addEventListener("click", function(){
    rotate1 = rotate1 ? 0 : 45;
    id1.style.transform = "rotate("+rotate1+"deg)";
});

id2.addEventListener("click", function(){
    rotate2 = rotate2 ? 0 : 45;
    id2.style.transform = "rotate(" + rotate2 + "deg)";
});

id3.addEventListener("click", function(){
    rotate3 = rotate3 ? 0 : 45;
    id3.style.transform = "rotate(" + rotate3 + "deg)";
    id3.style.transition = "transform 2s";
});

#id1, #id2, #id3 {
    width: 100px;
    height: 15px;
    border: 2px solid;
}

<div class="centerbox">
  <div id="id1" style="cursor:pointer">div can rotate</div>
  <span id="id2" style="cursor:pointer">span doesn't</span><br>
  <span id="id3" style="cursor:pointer">span can transform though</span>
</div>  

UPDATE

• The description above is only valid for Chrome
• on FireFox id2 and id3 don't rotate and the transition of id3 doesn't work
• on IE11 all rotations and id3's transition works

Answer 1

As per the DOM, the block examples are structural elements while the inline elements are text-based (non structural).

To see this visually, refer the below screenshot:

From this you can see the block and inline-block elements having a clear structure (like a square or rectangle). But the inline elements are not having a proper structure (which having the break off blocks).

And we can't properly (generically) apply the transformation for these unstructured blocks, so that the <span> elements didn't support the transformation.