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

No puede obtener esta imagen animada a trabajar, se supone que debe hacer un giro de 360 grados de rotación.

Supongo que algo está mal con el CSS a continuación, ya que queda todavía.

.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); 
}
}
}
InformationsquelleAutor Borsn | 2013-05-27

5 Comentarios

  1. 448

    Aquí es un demo. La correcta animación CSS:

    CSS:

    .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); } }

    HTML:

    <img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">


    Algunas notas sobre el código:

    1. Ha anidado los fotogramas clave dentro de la .image regla, y eso es incorrecto
    2. float:left no funciona en los elementos con posición absoluta
    3. Echar un vistazo a caniuse: IE10 no necesita la -ms- prefijo
    • Si alguien intenta esto en su propio código: NO se OLVIDE de LA @ de la sección en la parte inferior
    • Simplificado de demostración: jsfiddle.net/Ugc5g/4710
    • Hola puedo dejar de animación Infinidad de rotación después de 5s ?
    • Casi me escupió el agua de mi cuando me encontré con la animación.
    • No funciona en el móvil..
    • «float:left won't work on absolutely positioned elements » , va a reducir al mínimo el tamaño, aunque, similar a lo que display: inline-block ¿

  2. 30

    He rotación de la imagen utilizando la misma cosa que usted:

    .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);
    }
    • agregar: transform:rotate(360deg); para IE
    • Por favor, elija ejemplos locales más roto vínculos de la página web.
    • El enlace está roto ahora.
  3. 27

    Para lograr la rotación de 360 grados, aquí está la La Solución De Trabajo De.

    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);
    }

    Tiene para el puntero del mouse sobre la imagen y obtendrá la 360 grados de rotación de efecto.

    PS: Agregar un -webkit- extensión para que funcione en chrome y otros navegadores webkit. Puede comprobar la versión actualizada de violín para webkit AQUÍ

    • El violín no funciona o.O Chrome inspector no le gusta tu CSS, específicamente el de «transformar» y «la transición de la propiedad». Oh queridos.
    • Para que usted necesita para añadir un -webkit-tranform para que funcione. Aquí está la actualización del violín. jsfiddle.net/sELBM/172 – @JustPlainHigh
    • Gracias por la actualización. Bonita respuesta 🙂
    • 2017: Esto es ahora muy bien soportado y una manera preferida de hacer no-infinito rotaciones. -webkit- prefijo ya no es necesario y se puede quitar de forma segura. Compatibilidad del navegador: caniuse.com/#search=transforms
  4. 1

    si quieres voltear la imagen se puede utilizar.

    .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); } }
  5. -6

    Aquí esto debería ayudarle a

    La siguiente jsfiddle enlace le ayudará a entender cómo girar una imagen.He utilizado el mismo para girar 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: tiempo actual,

    • * * * b: valor inicial,

    • c: cambio En el valor,

    • d: duración,

    • x: no utilizado

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

    • Me gustaría upvote esta respuesta si usted proporciona un poco más de información (como en el violín). Siento, además, se debe mencionar que este es un plugin de jQuery porque yo estaba como, «yo no sabía que jQuery puede hacer eso!!! ^_^ mira el violín Oh, espera… U_U»
    • ¿qué clase de información que usted desea.?
    • una explicación de la x,t,b,c,d variables (como en el violín) y que indique claramente que aunque no es una solución CSS como solicitado por el OP, es bastante simple y eficaz plugin de jQuery solución 🙂
    • Votada abajo. El OP no solicitar un Javascript solución, especialmente no un plugin de jQuery. Se adhieren a lo que se le pide.

Dejar respuesta

Please enter your comment!
Please enter your name here