3

jsfiddle の例 http://jsfiddle.net/chrisloughnane/T9N3h/

この例は Opera、Chrome、Firefox では正常に動作しますが、IE の変換が見つかりません。

また、Firefox では、多くの変換があるとすべてのアニメーションが停止します。

http://toys.chrisloughnane.net/

これにアプローチするより良い方法はありますか？ティア。

HTML

<div class="display"></div>

CSS

.display {
    background-image: url("http://toys.chrisloughnane.net/images/darkhand-small-50.png");
    height: 25px;
    width: 25px;
    -webkit-transition:all 400ms;   
    -moz-transition:all 400ms;
    -o-transition:all 400ms;
    transition:all 400ms; 
    position: absolute;
    top: 200px;
    left: 200px;
}

JavaScript

$(document).ready(function() {

    function getRandom(min, max) {
        return min + Math.floor(Math.random() * (max - min + 1));
    }

    function go() {

        var iCSS = ("rotate(" + getRandom(0, 359) + "deg)");

        $(".display").css({
            '-moz-transform': iCSS,
            '-o-transform': iCSS,
            '-webkit-transform': iCSS
        });

        setTimeout(go, 600);
    }

    go();

});
4

1 に答える 1

4

はい、IE9 は CSS 変換をサポートしています。-ms-プレフィックスを追加するだけです。

詳細については、CanIUse の Web サイトを参照してください。

ただし、質問のCSSコードに表示されるトランジションはサポートしていません。IE9 (またはそれ以前) で CSS トランジションをサポートする必要がある場合は、CSS Sandpaper ポリフィル ライブラリを使用できます。

于 2013-03-03T21:07:33.393 に答える