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

img {  
  width: 100%;
}

I want to make the earth spinning.

https://jsfiddle.net/La3qbr0v/

jod
  • 29
  • 1
  • i Think that this subject is been answered in here [Link](https://stackoverflow.com/questions/16771225/css3-rotate-animation) –  Sep 08 '17 at 09:58
  • i think this subject is been answered in This [Link](https://stackoverflow.com/questions/16771225/css3-rotate-animation) –  Sep 08 '17 at 10:00

4 Answers4

2

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/

TResponse
  • 3,940
  • 7
  • 43
  • 63
2

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

Gage Hendy Ya Boy
  • 1,456
  • 4
  • 17
  • 35
2

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">
bellabelle
  • 908
  • 7
  • 13
1

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);
});
Mr. El
  • 73
  • 1
  • 10