Why isn't this simple jQuery script working?

I am trying to make a very basic HTML5/jQuery rotation script. Here is the code:

$(document).find("[data-rot]").each(function(i, e) {
        var rotation = $(this).attr("data-rot");
        console.log(i+' '+rotation);
        $(this).css({ '-moz-transform': rotation, '-webkit-transform': rotation });
});

And the HTML:

<div data-rot="90">Rotate me 90 degrees</div>
<div data-rot="20">Rotate me 20 degrees</div>
<div data-rot="180">Rotate me 180 degrees</div>
<div data-rot="300">Rotate me 300 degrees</div>

What am I doing wro开发者_如何转开发ng? The console.log() works.

Instead of just a number, try setting the values of the transform properties to rotate(90deg) and so on. There are many more CSS transform functions than just rotation, see more here.

Use: $(this).css({ '-moz-transform': rotation+"deg", '-webkit-transform': rotation+"deg"})

Basically, you need to set the rotation as "xdeg", rather than "x"