div可以旋轉，span不能旋轉，但它可以動畫轉換

我已經附加了html中三個對象的代碼。請看看在SO碼操場或在這裏：http://jsfiddle.net/kr34643L/div可以旋轉，span不能旋轉，但它可以動畫轉換

第一個（ID1）是DIV，我可以通過CSS3旋轉。

第二個（id2）是範圍並且不可能以相同的方式旋轉它。

但是可以在轉換時旋轉範圍（id3）。只有它不會停留在那個位置上。

我已經看到了有關設置顯示器塊或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>

UPDATE

上面的說明僅適用於Chrome的
上火狐 ID2和ID3不旋轉以及轉換id3不起作用
上IE11所有旋轉和ID3的過渡工作

來源

2015-07-19 NilsB

當我申請時，我有你的'id2'' span''點擊旋轉：'position：absolute' not working，但是，對於第二個範圍。另外我在最後一個元素 – s0rfi949

@ s0rfi949上看不到FF上的任何轉換。感謝關於FF的提示。我描述的問題發生在Chromium上。我也會檢查IE11。所以它更加複雜... – NilsB

其實CSS變換樣式沒有申請內嵌元素，因爲它們不被認爲是塊元素。

從W3 standard的官方答覆檢查。

作爲每變形元件的W3標準：

一個元件，其佈局由CSS盒模型，其可以是一個塊級或原子行內元素，或者其顯示管轄屬性計算到錶行，錶行組，表頭組，表尺基，表小區，或表字幕 [CSS21]

在SVG命名空間的元素，而不是由CSS盒模型，其具有的屬性變換，「patternTransform」或gradientTransform [SVG11]支配。

所以你不能轉換樣式應用到<span>元素。

來源

2015-07-19 19:09:05 Soundar

感謝您的回答。你怎麼看？那麼Chrome應該不會顯示轉換？ – NilsB

是的，即使在Chrome中我們也無法對span元素應用變換。但是在這裏你已經應用了轉換，它只是起到了虛擬效果的作用。完成該動畫後，它不能保持狀態，它只是返回到內聯樣式。我認爲這可能是瀏覽器的依賴。 – Soundar

感謝您的回答，它當然足以標記爲已接受 - 但我仍然不理解背後的限制：他們爲什麼在W3C中將其定義爲僅針對這些塊級元素進行轉換。我仍然不明白這一點。 – NilsB

作爲每DOM中，該塊的例子是結構元件而內聯元件是基於文本（非結構）。

To see this視覺，請參閱下面的截圖：

block vs inline elements in DOM

從這可以看到塊和內聯塊具有明確結構（如正方形或長方形）元件。但內聯元素沒有適當的結構（其中具有中斷塊）。

而且我們無法正確地（一般地）對這些非結構化塊應用轉換，因此元素不支持轉換。

來源

2015-07-20 07:10:53 Soundar

div可以旋轉，span不能旋轉，但它可以動畫轉換

回答

相關問題