Continuous rotation of image on button click using Javascript -
I want to rotate the image after every one second. I have used the following code but it does not work. My code is: -
& lt; Html & gt; & Lt; Top & gt; & Lt; Style & gt; .Rated-Image {-webkit-transform: rotate (2deg); Consequently: rotate (2deg); } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Section id = "medium" & gt; & Lt; Img id = "image" src = "1.png" & gt; & Lt; Button onclick = "myfunction ()" & gt; Click me & lt; / Button & gt; & Lt; / Section & gt; & Lt; Script & gt; Function myFunction () {var img = document.getElementById ("image"); Img.setAttribute ("square", "rotation-image"); SetTimeout ("myfunction ()", 1000); } & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;
You can do it with pure CSS. Try it out:
& lt; Style & gt; @ -webkit-keyframes {animate-rotate {to {-webkit-transform: rotate (0deg); Conviction: Rotate (0deg); } To {-webkit-transform: rotate (360deg); Consequently to rotate (360 degrees); }} @ -keyframe anime-rotate {to {-webkit-transform: rotate (0deg); Conviction: Rotate (0deg); } To {-webkit-transform: rotate (360deg); Consequently to rotate (360 degrees); }}. Rated-Image {-bbkit-animation: Animate-rotate 180s; Animation: Animate-rotate 180s; } & Lt; / Style & gt; Function myFunction () {var img = document.getElementById ("image"); Img.setAttribute ("square", "rotation-image"); }
Comments
Post a Comment