Question

Here is my problem. I’d like my image to be progressively animated so that it turns 360° in one second. So 1deg every 3ms does 360deg every 1000ms. For now nothing happen 🙁 .

Thanks in advance.

Here is the code

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

You are not incrementing the amount of rotation so you are continuously setting it to 1 degree.

I’ve made a fiddle of a working example (using a kitten as a clock!)

Hope that helps!