transform rotate полный оборот + N deg on hover

Question

Есть самолет, который вращается по кругу при ховере на блоки рядом (N deg берем с data этого блока и через js задаем transform rotate). Нужно сделать что бы самолет делал полный оборот + N deg всегда по часовой стрелке при каждом ховере. Сейчас срабатывает только первый раз, а потом просто на N deg (например было 400 deg а потом 420,вместо полного оборота поверенет на 20 deg)

[codepen](https://codepen.io/kirill321592/pen/mdVQmYJ)

Answer 1

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

// ...

let current = 0; // Сколько оборотов самолёт сделал

function setProgress(percent) {
    const deg = (percent * 360) / 100; // Вычисляем, на какой угол нужно повернуться (от 0)
    current++; // Отмечаем ещё один оборот
    arrow.style.transform = "rotate(" + (current * 360 + deg) + "deg)"; // Крутим самолёт
}

// ...

Answer 2

let current = 0;
function setProgress(percent) {
  const da = (percent - (current % 100) + 100) % 100 + 100;
  current += da;
  const deg = (current / 100) * 360;
  arrow.style.transform = "rotate(" + deg + "deg)";
}

БЛОГ НА HUSL

transform rotate полный оборот + N deg on hover

Ответы (2 шт):