¿Cómo hacer que una imagen gire continuamente?

Hola, encontramos la solución a tu búsqueda, desplázate y la obtendrás más abajo.

Solución:

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

Agregar -moz-transform/animation, -ms-transform/animationetc reglas para soportar otros navegadores.

También puedes hacer un GIF animado :).

Actualizar

El soporte de animación está disponible en la mayoría de los navegadores actuales, lo que significa que los prefijos se pueden eliminar:

(Para la rotación inversa, cambie el ‘desde’ y el ‘a’)

@keyframes rotate 
  from 
    transform: rotate(0deg);
  
  to  
    transform: rotate(360deg);
  


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

Taquigrafía:

img.star 
    animation: rotate 0.5s infinite linear;

Puedes hacerlo con CSS: (utilizando el núcleo de tu GPU):

img 
    animation:2s rotate infinite linear; 


@keyframes rotate
    100% transform:rotate(1turn)  // or 360deg

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

Consulte http://jsfiddle.net/AJgrU/ para ver un ejemplo.

Si aceptas, puedes dejar un artículo acerca de qué le añadirías a esta noticia.

---

---

Utiliza Nuestro Buscador