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。

希望对您有所帮助。