Jquery ccs3 часы 360 ° = 1 секунда

Question

Вот моя проблема.Я бы хотел, чтобы мое изображение постепенно анимировалось, чтобы оно поворачивалось на 360 ° за одну секунду.Таким образом, 1deg каждые 3 мс делает 360deg каждые 1000 мс.Пока ничего не происходит :(.

Заранее спасибо.

Вот код

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 градус.

Я сделал скрипку рабочего примера (используя котенка в качестве часов!)

Надеюсь, это поможет!

Answer 2

Потому что вы используете некоторые правила CSS3 в вашем примере, вот несколько правил CSS3: http://jsfiddle.net/semencov/RkysX/

Answer 3

То, что вы на самом деле делаете с var srotate = "rotate(1deg)";, это установка поворота на 1 градус каждые 3 миллисекунды. Вам нужно добавить один градус за 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.
});

Подробнее здесь о преобразованиях.

Подробнее здесь по оператору модуля (%).

Из-за выполнения скрипта ваши "часы" могут задержаться в долгосрочной перспективе при использовании setInterval. Подробнее об этом здесь .