How to rotate Image in Javascript?

Question

I want to rotate fan image when click the turnOn button. And the turnOff button is clicked, rotation is stopped.

My code is:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>

<body>

  <img id="myFan" src="fan.png" width="200" heigh="100"><br>
  <button onclick="turnOn()"> On </button><br>
  <button onclick="turnOff()"> Off </button>

  <script>
    function turnOn() {
      var x = document.getElementById("myFan");
    }

    function turnOff() {
      var x = document.getElementById("myFan");
    }
  </script>
</body>

</html>

Welcome to StackOverflow! Have you tried anything so far? Please update your question to show what you have already tried, showcasing a specific problem you are facing in a minimal, complete, and verifiable example. For further information, please see how to ask a good question, and take the tour of the site. — palaѕн
– palaѕн, Commented Jul 4, 2018 at 7:03
Using CSS animations will be a great start to achieve your goal. There will be a lot of answers online if this is sought after. — mitchken
– mitchken, Commented Jul 4, 2018 at 7:35

Suhas · Accepted Answer · 2018-07-04 07:16:07Z

6

Try this (for some reason the image is not showing up):

let timer;
let turn = 0;
function turnOn() {
  timer = setInterval(turnFan, 200);
  let x = document.getElementById("on");
  x.disabled = true;
}

function turnOff() {
  clearInterval(timer);
  let x = document.getElementById("on");
  x.disabled = false;
}

function turnFan() {
  let x = document.getElementById("myFan");
  turn += 60;
  x.style.transform = "rotate("+ (turn % 360) +"deg)"
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
</head>

<body>

  <img id="myFan" src="http://www.pngmart.com/files/7/Ceiling-Fan-PNG-Transparent-Image.png" width="200" heigh="100"><br>
  <button id="on" onclick="turnOn()"> On </button><br>
  <button id="off" onclick="turnOff()"> Off </button>

  
</body>

</html>

answered Jul 4, 2018 at 7:16

Suhas

5804 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

B.Sung Over a year ago

Thank you! You helped me a lot.

Suhas Over a year ago

No problem. Could you accept my answer? i.e. the green tick

Luc Over a year ago

I needed element.style.transform = `rotate(${Math.atan2(vspeed, hspeed) + (Math.PI / 2)}rad)`; in case this is of use to anyone. The + (Math.PI / 2) bit rotates 90° in radians because my sprites were drawn as up=0°. Another hint: setting an invalid value (like if the calculation comes out to NaN and so you end up with rotate(NaNrad), it will not log any error or warning and element.style.transform will show up as '' empty string. To debug it, you need to log what you're setting and manually eyeball it to see if it's valid...

Adrita Sharma · Accepted Answer · 2019-08-14 12:40:44Z

2

I've implemented this in one of my projects:

function rotate90 (img){
var img=this

if (img.style.transform == ""){var x=90;
    window.localStorage.setItem("x", Number(x))  
}

else{
    var x = Number(window.localStorage.getItem("x"))
    x += 90;
    if (x==360){x=0}
    window.localStorage.setItem("x", Number(x))  
    }
img.style.transform ="rotate("+x+"deg)";

                    }

in your code use img.onclick=rotate90; It should work.

edited Aug 14, 2019 at 12:40

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

answered Aug 14, 2019 at 12:37

Tamburiks

212 bronze badges

Comments

andria_girl · Accepted Answer · 2021-02-22 05:22:12Z

Using CSS Animations and `animation-play-state`

You can use a CSS animation to easily, continuously, and performantly rotate your image. In order to keep the animation from playing right away, you can set the animation-play-state CSS property to paused. When you want to make the animation play — to make the fan rotate — you can either unset animation-play-state or set it to running.

How do I make this accessible

You can set the alt attribute on the image according to what it looks like to the user (i.e. spinning or not). To let the user know if this change, you should set aria-live="polite" so that the assistive technology will read aloud the alternative text.

In order to make the on/off buttons more accessible, you have a few options. One option would be to set display: none on the button that was last pressed. Another option would be to set disabled to true on the last pressed button. Lastly, you could use one button that toggles it on and off, set aria-live="polite" on it, and change the text from "Turn on fan" to "Turn off fan" and vice versa.

let fanStatus = 'off'
on.addEventListener('click', () => {
  if (fanStatus === 'off') {
    rotateMe.classList.remove('paused')
    rotateMe.alt = 'spinning bladed fan'
    on.disabled = true
    off.disabled = false
  }
})
off.addEventListener('click', () => {
  if (fanStatus === 'off') {
    rotateMe.classList.add('paused')
    rotateMe.alt = 'bladed fan'
    on.disabled = false
    off.disabled = true
  }
})

img {
  width: 90px;
  height: 90px;
}

.rotate {
  animation: rotate 0.75s infinite linear;
}
.paused {
  animation-play-state: paused;
}

@keyframes rotate {
  100% {
    transform: rotate(-360deg);
  }
}

<img
  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScQe7tlEzE58so4n8IIn3LjKI2JCq_HIckHg&usqp=CAU"
  alt="bladed fan"
  id="rotateMe"
  class="rotate paused"
  aria-live="polite"
/>
<button id="on" aria-live="polite">Turn on fan</button>
<button id="off" aria-live="polite" disabled>Turn off fan</button>

Collectives™ on Stack Overflow

How to rotate Image in Javascript?

3 Answers 3

3 Comments

Comments

Using CSS Animations and `animation-play-state`

How do I make this accessible

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Using CSS Animations and animation-play-state

How do I make this accessible

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Using CSS Animations and `animation-play-state`