IE9中的CSS3旋轉

Question

我有一個jsfiddle應該可以在IE9中工作，但那不是

CSS：

#MyDiv{
    width:150px;
    height:150px;       
    margin:100px 100px;
    background-color: red;
    transition:all 2s ease;
    -ms-transition:all 2s ease;}

.Rotate{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform: rotate(360deg);}

JavaScript：

$(document).ready(function () { AddRotate(); });

function AddRotate() {

    $('#MyDiv').addClass('Rotate');  

    setTimeout(function () {
        RemoveRotate();
    }, 2000);    
}

function RemoveRotate() {

    $('#MyDiv').removeClass('Rotate');

    setTimeout(function () {
       AddRotate();
    }, 2000);  
}

和HTML： <div id="MyDiv">test</div>

我不確定為什么它不起作用。 這是關於創建帶有過渡的CSS旋轉； 錯誤在哪里，以及如何修復它才能使其在IE9中運行？

謝謝。

Answer 1

IE9支持旋轉，但CSS過渡不支持。

您需要使用JavaScript解決方案。

我的建議是使用CSS Sandpaper庫，因為它允許您使用標准CSS進行轉換，甚至在IE中也是如此，這反過來意味着您不必僅因為IE而切換到其他瀏覽器的JS。

希望能有所幫助。

Answer 2

IE9不支持轉換，僅從IE10開始才支持過渡。 有關更多信息，請參見我可以使用 。