Why can't I set -ms-transform with jQuery?

Question

This is the code for my entire page. The div is rotated in Firefox (as expected), but not in IE9. Setting the -ms-transform property using normal CSS makes the div rotate, so the problem seems to stem from the attempt to set the property using jQuery. Does anyone know what's going on?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="/jquery-latest.pack.js"></script>
<script>    
    $(function(){
        $("#divid").css("-ms-transform", "rotate(-90deg)");   // For IE9
        $("#divid").css("-moz-transform", "rotate(-90deg)");  // For Firefox
    });
</script>
</head>
<body>
    <div id="divid">Foo</div>
</body>
</html>

is your doctype not broken?? can you check if that is the start of the page. — kobe, Jun 25 '11 at 17:35

score 4 · Answer 1 · answered Jun 25 '11 at 17:38

4

It might be easier to use a CSS Class for this:

.rotated {
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

------

jQuery(function ($) {
    $('#divid').addClass('rotated');
});

answered Jun 25 '11 at 17:38

nickf

537,072
198
649
721

For compatibility with webkit browsers (Chrome, Safari) you may add "-webkit-transform" – Bakudan Jun 25 '11 at 17:41
@Bakudan, yes, obviously you can add whatever styles you need for your target browsers into the CSS. – nickf Jun 25 '11 at 18:02

score 3 · Accepted Answer · edited May 23 '17 at 12:21

3

Actually, you can! :-)

$('#divid').css({ msTransform: 'rotate(-90deg)' }); // for IE9

Very relevant IE9: Why setting "-ms-transform" works from css, but not with jquery.css()

edited May 23 '17 at 12:21

Community

1
1

answered Jun 25 '11 at 17:39

andyb

43,435
12
121
150

score 0 · Answer 3 · answered Jun 25 '11 at 17:39

This might be relevant: http://bugs.jquery.com/ticket/8346

The one reporting it got around with using jQuery.cssHooks:

jQuery.cssHooks["MsTransform"] = {
    set: function( elem, value ) {
        elem.style.msTransform = value;
    }
};

$("#divid").css("MsTransform", "rotate(-90deg)");

Why can't I set -ms-transform with jQuery?

3 Answers3