How do I rotate an image with jquery?

Question

How do I rotate an image with jquery?

Navigation

#1 by (7 votes)

2

Well it's the following I have the following code:

<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script></head><imgsrc="roda.png"></img>

<button>Rodar!</button>

I want to make clicking on the button Rotate, that the image rotates, in order to rotate, as it is demonstrated in the following site: www.csgo500.com

How can I do this?

Thank you.

html jquery

asked by anonymous 23.07.2017 / 12:28

1 answer

Calling generic methods in C # Add javascript to Wordpress plugin

score 7 · Accepted Answer

You can use transform: rotate(7deg); for this and make transition: transform 2s; for smooth rotation.

var btn = document.querySelector('button');
var img = document.querySelector('img');

btn.addEventListener('click', function() {
  var graus = Math.random() * 1000;
  img.style.transform = 'rotate(' + graus + 'deg)';
});

img {
  transition: transform 2s;
}

<button type="button">Rodar!</button>
<img src="http://www.pngall.com/wp-content/uploads/2017/03/Compass-Free-PNG-Image.png"></img>