CODEWITHSUNDEEP
cssinternet-explorerfirefoxtransform
chris loughnane
chris loughnane

Reputation: 2748

Is there a CSS 'transform' for IE9 browsers?

An example on jsfiddle http://jsfiddle.net/chrisloughnane/T9N3h/

This example works fine in opera, chrome and firefox but I can't find a transform for IE.

Also on Firefox all animation stops when there are a lot of transforms.

http://toys.chrisloughnane.net/

Is there a better way to approach this? tia.

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();

});

Upvotes: 3

Views: 1503

Answers (1)

Spudley
Spudley

Reputation: 168705

Yes, IE9 supports CSS Transforms. You just have to add the -ms- prefix.

See the CanIUse website for more info.

It doesn't however, support Transitions, which I see in your CSS code in the question. If you need to support CSS transitions in IE9 (or earlier), you could use the CSS Sandpaper polyfill library.

Upvotes: 4

Related Questions