CODEWITHSUNDEEP
javascriptjquerycssanimationjquery-animate
jod
jod

Reputation: 29

How do I make an image rotate?

<img src="http://i.imgur.com/uUYXqAv.png">

img {  
  width: 100%;
}

I want to make the earth spinning.

https://jsfiddle.net/La3qbr0v/

Upvotes: 1

Views: 251

Answers (4)

bellabelle
bellabelle

Reputation: 926

Below is my code. My jsFiddle.

img {    
width: 100%;
animation: rotate 60s ease infinite;
-webkit-animation: rotate 60s ease infinite;
}

@keyframes rotate{
  100%{ transform: rotate(360deg); }
}
@-webkit-keyframes rotate{
  100%{ transform: rotate(360deg); }
}
<img src="http://i.imgur.com/uUYXqAv.png">

Upvotes: 2

Mr. El
Mr. El

Reputation: 73

You can use a script that sets a variable and then have a function set an interval to rotate your picture.

var start = 0;
$(document).ready(function() {
     setInterval(function() {
          $("picture").rotate(start);
     }, 100);
});

Upvotes: 1

Gage Hendy Ya Boy
Gage Hendy Ya Boy

Reputation: 1564

You can use CSS transforms.

img {
  transform:rotate(ydeg);
}

( y being any number between 0 and 360 )

If you want to animate it you can use keyframes - https://codepen.io/quangogage/pen/OjYvNG?editors=1111

Upvotes: 2

TResponse
TResponse

Reputation: 4125

Hi you can use keyframes:

img {
    position: absolute;   
    width: 100%;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

See here:

https://jsfiddle.net/loanburger/47z5bro3/

Upvotes: 2

Related Questions