div可以旋轉，span不能旋轉，但它可以為變換設置動畫

Question

我在html中附加了三個對象的代碼。 請看看SO代碼游樂場或在這里： http ： //jsfiddle.net/kr34643L/

第一個（id1）是div ，我可以通過css3旋轉它。

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

但是可以在進行轉換時旋轉跨度 （id3）。 只有它不會留在那個位置。

我已經看到了關於將顯示設置為塊或內聯塊的答案，但老實說我不明白為什么我必須更改顯示樣式。 特別是當轉換運行良好但只是不保持位置結束時。

 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

• 以上說明僅適用於Chrome
• on FireFox id2和id3不旋轉，id3的轉換不起作用
• 在IE11上所有旋轉和id3的過渡都有效

Answer 1

實際上CSS轉換樣式不適用於內聯元素，因為它們不被視為塊元素。

對於W3標准的官方答復檢查。

根據可轉換元素的W3標准：

• 一個元素，其布局由CSS框模型控制，該模型是塊級或原子內聯級元素，或者其顯示屬性計算為表行 ， 表行組 ， 表標題組 ， 表腳-group ， table-cell或table-caption [CSS21]

• SVG命名空間中的一個元素，不受CSS框模型的控制，該框模型具有屬性transform，'patternTransform'或gradientTransform [SVG11]。

因此，您無法將轉換樣式應用於<span>元素。

Answer 2

根據DOM，塊示例是結構元素，而內聯元素是基於文本的 （非結構化的）。

要直觀地看到這一點 ，請參閱以下屏幕截圖：

從中您可以看到具有清晰結構的塊和內聯塊元素（如正方形或矩形）。 但是內聯元素沒有合適的結構（具有中斷塊）。

並且我們無法（通常）對這些非結構化塊應用轉換，因此<span>元素不支持轉換。