div 可以旋转，span 不能旋转，但可以动画转换

Question

我在 html 中附加了三个对象的代码。请查看 SO 代码游乐场或此处： http ://jsfiddle.net/kr34643L/

第一个 (id1) 是一个div，我可以通过 css3 旋转它。

第二个（id2）是一个跨度，不可能以相同的方式旋转它。

但可以旋转跨度但在进行过渡时只是它不会停留在那个位置。

我已经看到有关将 display 设置为block或inline-block的答案，但老实说，我不明白为什么我必须更改显示样式。特别是当过渡效果很好但只是不能保持最后的位置时。

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>  

更新

• 以上描述仅适用于Chrome
• 在FireFox上id2 和 id3 不旋转并且 id3 的过渡不起作用
• 在IE11上，所有旋转和 id3 的过渡均有效

Answer 1

实际上，CSS 变换样式不适用于内联元素，因为它们不被视为块元素。

\n\n

官方答案请查看W3标准。

\n\n

根据可变形元件的W3标准：

\n\n

\n

\n

• 其布局由 CSS 框模型控制的元素，该元素是块级或原子内联级元素，或其显示属性计算为table-row、table-row-group、table-header-group、table-footer -group、table-cell或table-caption [CSS21]

\n

• SVG 命名空间中的元素，不受 CSS 盒模型的控制，该模型具有 Transform、\xe2\x80\x98patternTransform\xe2\x80\x98 或gradientTransform [SVG11] 属性。

\n

\n

\n\n

因此您无法将转换样式应用于<span>元素。

\n

Answer 2

根据 DOM，块示例是结构元素，而内联元素是基于文本的（非结构元素）。

要直观地看到这一点，请参考下面的屏幕截图：

由此您可以看到块和内联块元素具有清晰的结构（如正方形或矩形）。但是内联元素没有正确的结构（具有中断块）。

而且我们无法正确（一般地）对这些非结构化块应用转换，因此元素<span>不支持转换。