title: div can rotate, span can't rotate but it can animate the transformation
body: <p>I have attached code for three objects in html. Please have a look at the SO code playground or here: <a href="http://jsfiddle.net/kr34643L/" rel="noreferrer">http://jsfiddle.net/kr34643L/</a></p>
  
  <p>The first one (id1) is a <strong>div</strong> and I can rotate it via css3. </p>
  
  <p>The second one (id2) is a <strong>span</strong> and it is not possible to rotate it in the same way. </p>
  
  <p>But it is possible to rotate a <strong>span</strong> (id3) while doing the transition. Only it doesn't stay in that position. </p>
  
  <p>I have seen answers about setting display to <strong>block</strong> or <strong>inline-block</strong>, 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.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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";
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#id1, #id2, #id3 {
      width: 100px;
      height: 15px;
      border: 2px solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="centerbox"&gt;
    &lt;div id="id1" style="cursor:pointer"&gt;div can rotate&lt;/div&gt;
    &lt;span id="id2" style="cursor:pointer"&gt;span doesn't&lt;/span&gt;&lt;br&gt;
    &lt;span id="id3" style="cursor:pointer"&gt;span can transform though&lt;/span&gt;
  &lt;/div&gt;  </code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE</strong></p>
  
  <ul>
  <li>The description above is only valid for <strong>Chrome</strong></li>
  <li>on <strong>FireFox</strong> id2 and id3 don't rotate and the transition of id3 doesn't work</li>
  <li>on <strong>IE11</strong> all rotations and id3's transition works</li>
  </ul>