Rotate image using Javascript rotate function by change Image style on specific time interval and rotate radius. below are sample code that you can use for see rotate image effect with Javascript.
<script type="text/javascript">
var RotateInterval;
var Rad = 10;
function StartImgRotate()
{
RotateInterval = setInterval(start, 100);
//RotateInterval = setTimeout(function(){start();}, 10);
}
function start()
{
document.getElementById("img").style.MozTransform = "rotate(" + Rad + "deg)";
document.getElementById("img").style.webkitTransform = "rotate(" + Rad + "deg)";
Rad += 10;
}
function StopImgRotate()
{
clearInterval(RotateInterval);
}
</script>
<img id="img" src="icon.jpg" width="50px" height="50px" /> <br />
<br />
<input type="button" value="Play" onClick="StartImgRotate();" />
<input type="button" value="Stop" onClick="StopImgRotate();" />
<script type="text/javascript">
var RotateInterval;
var Rad = 10;
function StartImgRotate()
{
RotateInterval = setInterval(start, 100);
//RotateInterval = setTimeout(function(){start();}, 10);
}
function start()
{
document.getElementById("img").style.MozTransform = "rotate(" + Rad + "deg)";
document.getElementById("img").style.webkitTransform = "rotate(" + Rad + "deg)";
Rad += 10;
}
function StopImgRotate()
{
clearInterval(RotateInterval);
}
</script>
<img id="img" src="icon.jpg" width="50px" height="50px" /> <br />
<br />
<input type="button" value="Play" onClick="StartImgRotate();" />
<input type="button" value="Stop" onClick="StopImgRotate();" />
0 Comments