setInterval() 不适用于旋转

Question

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

你能告诉我为什么吗？

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

Answer 1

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

演示：

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>

Answer 2

小样本：

var ready = function() {
 
  var 
    star = document.getElementById('star'),
    degree = 0;
  
  setInterval(function() {
    
    /* Every 10ms degree variable increase its value by 1 */
    star.style.transform = "rotate(" + ++degree +"deg)"; }, 10
  );
};

#star {
  
  margin-left: 100px; 
  margin-top: 40px; 
  width: 60px; 
  border: 1px solid; 
  padding: 20px; 
}

<body onload="ready()">
  <div id="star">
    <h1>Yay!</h1>
  </div>
</body>

setInterval() 不适用于旋转

setInterval() not working with rotate

javascript

intervals