Come ruotare un'immagine in modo continuo?

Question

) Ho un'immagine stellare in alto a sinistra del mio schermo che vuole ruotare continuamente. così qualcuno può dirmi come possiamo fare una rotazione dell'immagine in modo continuo per i browser Mozilla Firefox, Google Chrome !? [Css tipo di posizione è 'Assolutamente' e la risoluzione delle immagini: 25 * 25]

Answer 1

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

img.star 
{ 
    -webkit-animation-name:    rotate; 
    -webkit-animation-duration:   0.5s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
} 

Aggiungi -moz-transform/animation, -ms-transform/animation, ecc regole per supportare altri browser.

Si potrebbe anche creare un GIF animato :).

Answer 2

Prova questa http://code.google.com/p/jquery-rotate/

e si può fare in questo modo:

var angle = 1; 
    $(document).ready(function() { 
     setInterval(function() { 
       $("#pic").rotate(angle); 
      }, 100); 
}); 

Answer 3

che si può fare con i CSS: (utilizzando il vostro core GPU):

img{ 
 
    transform-origin:50% 50%; 
 
    animation:2s rotateRight infinite linear; 
 
} 
 

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

<img src="https://ih0.redbubble.net/image.364229144.1663/flat,200x200,075,t.jpg"> 
 

 

 

Answer 4

È possibile utilizzare RaphaelJS, poiché è compatibile con browser diversi. Ad esempio, questo codice dovrebbe funzionare:

<div id="paper" style="width:300px; height:200px"></div>

<script type="text/javascript" src="(link to downloaded copy of raphaeljs)"></script>

<script type="text/javascript"> 
var paper = Raphael("paper"); 
var good_cat = paper.image("http://pp19dd.com/_old/lily.png",40,20,96, 145); 
var evil_cat = paper.image("http://pp19dd.com/_old/cookie.png",160,20,96, 145); 
var angle = 0; 

setInterval(function() { 
    angle += 45;  
    good_cat.stop().animate({ "transform": "R" + angle }, 300, "<>"); 
}, 500); 


setInterval(function() { 
    r = parseInt(Math.random() * 359); 
    evil_cat.stop().animate({ "transform": "R" + r }, 300, "<>"); 
}, 1000); 
</script> 

Vedi http://jsfiddle.net/AJgrU/ per un esempio.

Answer 5

un esempio di lavoro jsFiddle con animazioni CSS3 e trasforma: http://jsfiddle.net/GcjKZ/1/ http://jsfiddle.net/GcjKZ/3/

img { position: absolute; width: 25px; height: 25px; 
    -moz-animation: 3s rotate infinite linear ; 
    -moz-transform-origin: 50% 50%; 
    -webkit-animation: 3s rotate infinite linear ; 
    -webkit-transform-origin: 50% 50%; 
} 

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

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

(mi dispiace, la mia stella non è molto ben centrato)