使用jQuery旋转div

我需要旋转div一次，然后使用这个代码

$.fn.rotate = function () {
var self = $(this);    

for (var degree = 0; degree <= 360; degree++){
    self.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
    self.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
    self.css({ 'transform': 'rotate(' + degree + 'deg)'}); 
}
};

$("img").rotate();

我的解决方案：

$.fn.clockwiseRotate = function () {
$(this).each(function () {
    var self = $(this),
        degree = 0;
    var interval = setInterval(function () {
        self.css({
            '-webkit-transform': 'rotate(' + degree + 'deg)'
        });
        self.css({
            '-moz-transform': 'rotate(' + degree + 'deg)'
        });
        self.css({
            'transform': 'rotate(' + degree + 'deg)'
        });
        degree++;
        if (degree === 361) {
            clearInterval(interval);
        }
    }, 1);
});
};

$.fn.counterclockwiseRotate = function () {
    $(this).each(function () {
        var self = $(this),
            degree = 360;
        var interval = setInterval(function () {
            self.css({
                '-webkit-transform': 'rotate(' + degree + 'deg)'
            });
            self.css({
                '-moz-transform': 'rotate(' + degree + 'deg)'
            });
            self.css({
                'transform': 'rotate(' + degree + 'deg)'
            });
            degree--;
            if (degree === -1) {
                clearInterval(interval);
            }
        }, 1);
    });
};
$('img:first-child').clockwiseRotate();
$('img:last-child').counterclockwiseRotate();

---

控制台中是否有任何错误？可能需要在每次更新之间使用超时，以确保它显示在屏幕上？您正在将其旋转360度，这与它开始时的位置相同。看起来效果不错（例如270度旋转）。而且我相信它是

-webkit transform

。我已经找到了解决方案并将其添加到我的question@truslivii.lev实际上，你可以发布自己问题的答案。事实上，这是鼓励在这个网站上的行为。继续并将其添加为答案，然后接受您自己的答案：）。

$.fn.clockwiseRotate = function () {
$(this).each(function () {
    var self = $(this),
        degree = 0;
    var interval = setInterval(function () {
        self.css({
            '-webkit-transform': 'rotate(' + degree + 'deg)'
        });
        self.css({
            '-moz-transform': 'rotate(' + degree + 'deg)'
        });
        self.css({
            'transform': 'rotate(' + degree + 'deg)'
        });
        degree++;
        if (degree === 361) {
            clearInterval(interval);
        }
    }, 1);
});
};

$.fn.counterclockwiseRotate = function () {
    $(this).each(function () {
        var self = $(this),
            degree = 360;
        var interval = setInterval(function () {
            self.css({
                '-webkit-transform': 'rotate(' + degree + 'deg)'
            });
            self.css({
                '-moz-transform': 'rotate(' + degree + 'deg)'
            });
            self.css({
                'transform': 'rotate(' + degree + 'deg)'
            });
            degree--;
            if (degree === -1) {
                clearInterval(interval);
            }
        }, 1);
    });
};
$('img:first-child').clockwiseRotate();
$('img:last-child').counterclockwiseRotate();