setInterval（）不能用于旋转

我有一个图像。我已经写了一些代码，将它旋转过来，但setInterval()函数不起作用。setInterval（）不能用于旋转

请问你能告诉我为什么吗？

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

来源

2016-04-30 Artdark92

递增的每次程度。你在en上分配相同的学位。 –

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

DEMO：

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>

来源

2016-04-30 11:15:09

最大学位是360.但你无限期地递增。 –

@RajaprabhuAravindasamy：更新.... –

@RajaprabhuAravindasamy“最大学位是360” - 我不同意，你有什么支持你的说法吗？ – James

小样本：

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>

来源

2016-04-30 11:16:28

谢谢everone！代码工作:) – Artdark92

setInterval（）不能用于旋转

回答

相关问题