为什么这个简单的jQuery脚本不起作用？

Question

我正在尝试制作一个非常基本的HTML5 / jQuery旋转脚本。这是代码：

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

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>

我做错了什么？ console.log（）可以正常工作。

Answer 1

尝试将变换属性的值设置为rotate(90deg)，而不仅仅是数字，等等。除了旋转之外，还有更多的CSS转换函数，请参阅更多here。

Answer 2

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

基本上，您需要将旋转设置为“xdeg”，而不是“x”