--- title: "Image Rotator using JavaScript and HTML" description: "In this article I am trying to make an Image Rotator using jQuery and HTML which is rotate an image in degrees. In this article I am going to crea" author: "Vijay Shukla" published: 2013-04-29 updated: 2019-09-07 canonical: https://www.mindstick.com/articles/1271/image-rotator-using-javascript-and-html category: "javascript" tags: ["javascript"] reading_time: 1 minute --- # Image Rotator using JavaScript and HTML In this [article](https://yourviews.mindstick.com/view/81489/kashmir-now-after-an-year-of-abrogation-of-article-370) I am trying to make an Image Rotator using jQuery and HTML which is [rotate](https://answers.mindstick.com/qa/34548/what-is-rotate-indefinitely) an image in degrees. In this article I am going to create a demo which is rotate an image or any HTML element in degrees. ##### HTML Code: ```
Rotate: Rotate image in Zero deg ``` ##### Description: Above HTML code will make a table and in the table have a image with height="150px" width="150px", and also have a range type input with minimum value -360 and maximum value 360 and also [handle](https://answers.mindstick.com/qa/46867/how-do-i-handle-it-if-i-m-downgraded-from-first-or-business-class-on-a-flight) onchange event and it will pass the value in [JavaScript function](https://www.mindstick.com/forum/156513/asynchronous-javascript-function). ##### JavaScript Code: ``` function rotator(value) { document.getElementById('imgTag').style.webkitTransform="rotate("+value+"deg)"; document.getElementById('imgTag').style.msTransform ="rotate("+value+"deg)"; document.getElementById('imgTag').style.MozTransform="rotate("+value+"deg)"; document.getElementById('imgTag').style.OTransform ="rotate("+value+"deg)"; document.getElementById('imgTag').style.transform="rotate("+value+"deg)"; document.getElementById('span1').innerHTML=value+" deg"; } ``` ##### Description: In above JavaScript code has a rotator function which takes a value from input type range on [change event](https://www.mindstick.com/forum/866/jquery-during-slidetoggle-class-change-event) and in the rotator function body set the rotation degrees. ##### Output: ##### In IE ![Image Rotator using JavaScript and HTML](https://www.mindstick.com/mindstickarticle/4e9da90c-1eb0-4f8b-9793-0fde89ccc660/images/d1a86e5a-574b-4eff-93dc-58f2327f3571.png) ##### In Mozilla ![Image Rotator using JavaScript and HTML](https://www.mindstick.com/mindstickarticle/4e9da90c-1eb0-4f8b-9793-0fde89ccc660/images/b9216854-bc7a-43c1-8ed3-f05e6011ee53.png) ##### In Chrome ![Image Rotator using JavaScript and HTML](https://www.mindstick.com/mindstickarticle/4e9da90c-1eb0-4f8b-9793-0fde89ccc660/images/e42058bd-074e-447b-a067-645f42bb26d6.png) ##### In Safari: ![Image Rotator using JavaScript and HTML](https://www.mindstick.com/mindstickarticle/4e9da90c-1eb0-4f8b-9793-0fde89ccc660/images/278a0439-4940-4d60-9e60-a83ca6bccf59.png) ##### In Opera: ![Image Rotator using JavaScript and HTML](https://www.mindstick.com/mindstickarticle/4e9da90c-1eb0-4f8b-9793-0fde89ccc660/images/e21b9f78-9551-456f-8ca2-a5fe616006c7.png) --- Original Source: https://www.mindstick.com/articles/1271/image-rotator-using-javascript-and-html Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.