Cómo hacer que una imagen gire continuamente?

Question

) Tengo una imagen de estrella en la esquina superior izquierda de mi pantalla que quiere rotar continuamente. así que ¿alguien puede decirme cómo podemos hacer que una imagen gire continuamente para navegadores Mozilla Firefox, Google Chrome? [Tipo de Posición Css es 'Absolutamente' y resolución de imagen: 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; 
} 

Agregue -moz-transform/animation, -ms-transform/animation, etc. reglas para admitir otros navegadores.

También podría hacer un GIF animado :).

Answer 2

probar este http://code.google.com/p/jquery-rotate/

y se puede hacer de esta manera:

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

Answer 3

se puede hacer eso con CSS: (la utilización de su núcleo de la 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

Puede usar RaphaelJS, ya que es compatible con varios navegadores. Por ejemplo, este código debería funcionar:

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

Ver http://jsfiddle.net/AJgrU/ para un ejemplo.

Answer 5

un ejemplo de trabajo jsFiddle con animaciones CSS3 y transforma: 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); } 
} 

(lo siento, mi estrella no es muy bien centrado)