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

Actually the CSS transform styles are not applied for the inline elements, since they are not considered as a block elements.

For the official answer check from the W3 standard .

As per the W3 standard of 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]

• an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, 'patternTransform' or gradientTransform [SVG11].

So you can't apply the transformation styles to <span> element.

Answer 2

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.