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（）不能用於旋轉

回答

相關問題