Без анимации при использовании requestAnimationFrame в javascript

Я хочу повернуть изображение, но у меня нет вращения изображения. Как это исправить?Без анимации при использовании requestAnimationFrame в javascript

HTML файл:

<html> 
<head> 
    <title>javascript</title> 
</head> 
<body> 

    <p style="text-align: center" > 
     <img src="kalam.jpg" style="position: relative"> 
    </p> 

    <script type="text/javascript" src="code.js"> 
    </script> 
</body> 
</html>

code.js:

var kalam = document.querySelector ("img") ; 
var angle = 0 , lastTime = null ; 
function animate (time) { 
    if (lastTime != null) 
     angle += (time - lastTime) * 0.001; 
    lastTime = time ; 
    kalam.style.top = (Math.sin (angle) * 20) + " px "; 
    kalam.style.left = (Math.cos (angle) * 200) + " px "; 
    requestAnimationFrame (animate) ; 
} 
requestAnimationFrame (animate);

источник

2015-11-21 learner

Единственная проблема заключается в том, что ваш CSS говорит " px" вместо "px", потому что вы не можете иметь место, прежде чем объявить, что такое устройство из которого используется ваше свойство css.

Demo on JSBin

var kalam = document.querySelector("img") ; 
 
var angle = 0 , lastTime = null ; 
 
function animate (time) { 
 
    if (lastTime != null) 
 
     angle += (time - lastTime) * 0.001; 
 
    lastTime = time ; 
 
    kalam.style.top = (Math.sin (angle) * 40) + "px "; 
 
    kalam.style.left = (Math.cos (angle) * 90) + "px "; 
 
    requestAnimationFrame (animate) ; 
 
} 
 
requestAnimationFrame (animate);

<img src="http://static.jsbin.com/images/dave.min.svg" style="position:absolute;margin:40px 0 0 100px;max-height:90px">

источник

2015-11-21 07:16:08 jaggedsoft

Без анимации при использовании requestAnimationFrame в javascript

ответ

Смежные вопросы