Question

这是我的问题。我希望我的图像逐渐动画，以便在一秒钟内转动360°。所以每3ms 1deg每1000ms做360deg。现在没有任何事情发生:(。

提前致谢。

这是代码

CSS：

#sec {
    position: absolute;
    top:200px;
    left: 300px;
    transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transition: transform 1s;
}

HTML：

<img id="sec" src="sec-02.png" />

使用Javascript：

$(document).ready(function() {
    setInterval(function() {
        var srotate = "rotate(1deg)";
        $("#sec").css({
            "-moz-transform": srotate,
            "-webkit-transform": srotate
        });
    }, 3);
});

Answer 1

您没有增加旋转量，因此您不断将其设置为1度。

我做了a fiddle of a working example（用小猫作为时钟！）

希望有所帮助！

Answer 2

您实际使用var srotate = "rotate(1deg)";进行的操作是每3毫秒将旋转设置为1度。你需要每3毫秒添加一度。

尝试此操作迭代度数直到360：

var degree = 1; // Declare outside your interval loop
setInterval(function(){ // Add this to your loop
    degree++;
    if(degree % 360 == 0){
        degree = 1;
    }
    var str = 'rotate(' + degree + 'deg)'; // str now equals your string for transforms.
});

Jquery ccs 3时钟360°= 1秒

3 个答案: