Animación de rotación CSS3

245
<img class="image" src="" alt="" width="120" height="120">

No se puede lograr que esta imagen animada funcione, se supone que debe hacer una rotación de 360 ​​grados.

Supongo que algo está mal con el CSS a continuación, ya que simplemente se queda quieto.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}
Borsn
fuente

Respuestas:

521

Aquí hay una demostración . La animación CSS correcta:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -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); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">


Algunas notas sobre su código:

  1. Has anidado los fotogramas clave dentro de la .imageregla, y eso es incorrecto
  2. float:left no funcionará en elementos posicionados absolutamente
  3. Eche un vistazo a caniuse : IE10 no necesita el -ms-prefijo
Giona
fuente
13
Si alguien intenta esto en su propio código: NO OLVIDE LA sección @ en la parte inferior
Jack M.
Hola ¿Puedo detener la rotación de animación Infinity después de 5 segundos?
MD Ashik
16
Casi escupí el agua cuando ejecuté la animación.
Razgriz
" float:left won't work on absolutely positioned elements", sin embargo, los reducirá al tamaño mínimo, similar a lo que se muestra: bloque en línea hace
gregn3
32

Tengo una imagen giratoria que usa lo mismo que tú:

.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;

     overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}
Ryan de Vries
fuente
1
agregar: transform:rotate(360deg);para IE
Dusty
3
Elija ejemplos locales sobre enlaces de sitios web rotos.
evolutionxbox
El enlace está roto ahora.
Markus Bucher
30

Para lograr la rotación de 360 ​​grados, aquí está la solución de trabajo .

El HTML:

<img class="image" src="your-image.png">

El CSS:

.image {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.image:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

Tienes que desplazarte sobre la imagen y obtendrás el efecto de rotación de 360 ​​grados.

PD: agregue una -webkit-extensión para que funcione en Chrome y otros navegadores webkit. Puede consultar el violín actualizado para webkit AQUÍ

Nitesh
fuente
Fiddle no funciona oO Al inspector de Chrome no le gusta tu CSS, específicamente la "transformación" y la "propiedad de transición". Oh querido.
Just Plain High
1
Para eso necesitas agregar un -webkit-tranformpara que funcione. Aquí está el violín actualizado. jsfiddle.net/sELBM/172 - @JustPlainHigh
Nitesh
1
2017: ahora es muy compatible y es una forma preferida de hacer rotaciones no infinitas. -webkit-El prefijo ya no es necesario y se puede eliminar de forma segura. Soporte de navegador: caniuse.com/#search=transforms
Alph.Dev
2

si quieres voltear la imagen puedes usarla.

.image{
    width: 100%;
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }
Heo Đất Hades
fuente
0

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -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); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

Charles Mbogo
fuente
0

intenta esto fácil

 
 .btn-circle span {
     top: 0;
   
      position: absolute;
     font-size: 18px;
       text-align: center;
    text-decoration: none;
      -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.btn-circle span :hover {
 color :silver;
}


/* rotate 360 key for refresh btn */
@-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); } } 
 <button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">&#x21bb;</span></button>

Omar bakhsh
fuente
-6

Aquí esto debería ayudarte

El siguiente enlace jsfiddle lo ayudará a comprender cómo rotar una imagen. Utilicé la misma para rotar el dial de un reloj.

http://jsfiddle.net/xw89p/

var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){       
          return c*(t/d)+b;
      }
   });
}
rotation();

Donde: • t: hora actual,

• b: valor inicial

• c: cambio de valor,

• d: duración,

• x: sin usar

Sin aceleración (aceleración lineal): función (x, t, b, c, d) {return b + (t / d) * c; }

Abhi
fuente
2
Votaría esta respuesta si proporciona un poco más de información (como lo hace en el violín). También siento que deberías mencionar que este es un complemento de jQuery porque pensé: "¡¡¡No sabía que jQuery podría hacer eso !!! ^ _ ^ mira el violín Oh, espera ... U_U"
Just Plain High
2
Una explicación de las variables x, t, b, c, d (como lo hace en el violín) y declarando claramente que aunque no es una solución CSS como lo solicitó OP, es una solución de complemento jQuery bastante simple y efectiva: )
Just Plain High
3
Voto negativo El OP no solicitó una solución Javascript, especialmente no un complemento jQuery. Apéguese a lo que se le pregunta.
TheCarver