div可以旋转，span可以旋转，但它可以为变换设置动画

Question

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

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

第二个（id2）是 span ，无法以相同的方式旋转它。

但是可以在进行转换时旋转 span （id3）。只有它不会留在那个位置。

我已经看到有关将显示设置为阻止或内联阻止的答案，但老实说，我不明白为什么我必须更改显示样式。特别是当过渡运作良好但只是没有保持位置结束时。

＆＃13;

＆＃13;

UISearchController

＆＃13;

UISearchController

＆＃13;

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";
});

＆＃13;

＆＃13;

＆＃13;

更新

• 以上说明仅适用于 Chrome
• on FireFox id2和id3不旋转，id3的转换不起作用
• on IE11 所有轮换和id3的过渡工作

Answer 1

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

来自W3 standard的正式答案。

根据可转换元素的W3标准：

  

  

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

  

• SVG命名空间中的一个元素，不受CSS框模型的控制，该模型具有属性transform，'patternTransform'或gradientTransform [SVG11]。

  

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

Answer 2

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

To see this直观地看，请参阅以下屏幕截图：

通过此，您可以看到具有清晰结构（如正方形或矩形）的块和内嵌块元素。但内联元素没有合适的结构（具有中断块）。

我们无法（通常）对这些非结构化块应用转换，因此 <span> 元素不支持转换。