Как повернуть элемент DOM на заданную сумму (чистый JS)

Question

Я пытаюсь вращать предмет непрерывно.Этот код работает для вращения «секундной» стрелки часов:

    function setTime() {
    const timer = new Date();
    const getSeconds = timer.getSeconds();
    const degrees = (getSeconds/60)*360;
    console.log('check: ', degrees);
    globe.style.transform = `rotate(${degrees}deg)`;

}
const globe = document.querySelector(".logo");

setInterval(setTime, 200);

Этот код позволяет вращать элемент.Однако я хотел бы повернуть элемент быстрее, чем этот, поэтому я попытался изменить таймер с 1000 мс до 200 мс и получить getMilliseconds () вместо getSeconds () и увеличение, что нене работаетЯ также попытался установить вращение с приращением без использования фактического времени, и элемент dom, который я схватил (.logo), вращается сначала один раз, а затем никогда не поворачивается снова:

function setTime() {
    const rotateDegs = 10;
    globe.style.transform = `rotate(${rotateDegs}deg)`;
}

const globe = document.querySelector(".logo");

setInterval(setTime, 200); 

Как мне получить мойпункт, чтобы непрерывно вращаться на любую сумму около 30 об / мин или больше?

Я хотел бы использовать только js и / или css no jquery.Спасибо

Answer 1

Также ответьте на чистом JavaScript.

Если вам нужно увеличить об / мин, как вы говорите более 30 , просто манипулируйте value переменной

let val = 0;

rotateItem = item => {
    item.style.transform = "rotate(" + val + "deg)";
    item.style.webkitTransform = "rotate(" + val + "deg)";
    item.style.mozTransform = "rotate(" + val + "deg)";
    val += 10; 
}
setInterval(() => rotateItem(document.getElementById('foo'), 0) , 100);

#foo {
  width:100px;
  height:100px;
  border:2px dashed blue;

}

<img  id="foo" src="https://upload.wikimedia.org/wikipedia/commons/6/64/Simple_light_bulb_graphic.png">