How do I rotate an image with jquery?

Asked

Viewed 1,477 times

2

Good is 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>


<img src="roda.png"></img>

<button>Rodar!</button>

I intend to make sure that by clicking on the Rotate button that the Rotate image rotates, as shown on the following website: www.csgo500.com

How can I do that?

Thank you.

jquery html

  • jquery Rotate: https://code.google.com/archive/p/jquery-rotate/

1 answer

7


You can use the transform: rotate(7deg); for this and do 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>

  • 1

    Very good Sergio +1

  • How do I, so that the image, rotates only with the clockwise direction?

  • @Gonçalo this has to do with the degrees you give. In my example he draws between 0 and 1000 degrees. If instead of drawing you add then already do what you want.

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.