javascript - setInterval() 不适用于旋转

Question

我有一张图片。我写了一些代码，可以将其旋转一遍，但 setInterval() 函数不起作用。

请告诉我为什么？

var star = document.getElementById('star');
setInterval(function() {star.style.transform = "rotate(10deg)"; },10);

Answer 1

您需要在每次函数调用时增加度值，只需使用变量即可完成。在您的情况下，它将始终保持10度旋转。

演示:

var star = document.getElementById('star'),
  deg = 10;
setInterval(function() {
  star.style.transform = "rotate(" + deg + "deg)";
  deg = (deg + 10) % 360
}, 10);

#star {
  width: 100px;
  height: 100px;
  background: red;
}

<div id="star"></div>

<小时/>

您可以使用css animation这里

@keyframes anim {
  0% {
    transform: rotate(0deg);
  }25% {
    transform: rotate(90deg);
  }50% {
    transform: rotate(180deg);
  }75% {
    transform: rotate(270deg);
  }100% {
    transform: rotate(360deg);
  }
}

#star {
  width: 100px;
  height: 100px;
  background: red;
  animation: anim .36s infinite;
}

<div id="star"></div>