Animation rotative CSS3

Question

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

Je n'arrive pas à faire fonctionner cette image animée, qui est censée faire une rotation de 360 degrés. Je suppose qu'il y a un problème avec le CSS ci-dessous, car elle reste immobile.

Par ailleurs, y a-t-il un moyen d'introduire de la physique dans l'animation ?

Merci beaucoup.

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

Answer 1

Voici un Démonstration . L'animation CSS correcte :

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

---

Quelques notes sur votre code :

1. Vous avez imbriqué les images clés à l'intérieur de l'élément .image règle, et c'est incorrect
2. float:left ne fonctionnera pas sur les éléments absolument positionnés
3. Jetez un coup d'œil à caniuse : IE10 n'a pas besoin du -ms- préfixe

---

Je ne suis pas sûr de ce que vous voulez dire par "introduire de la physique dans l'animation", mais vous pouvez intervenir sur le "easing", voir ces liens pour plus d'informations :

• http://matthewlein.com/ceaser/
• http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

Answer 2

Pour réaliser la rotation à 360 degrés, voici la procédure à suivre Solution de travail .

Le HTML :

<img class="image" src="http://tma.no-ip.de/waifu/result9.png">

Le CSS :

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

Vous devez survoler l'image et vous obtiendrez l'effet de rotation à 360 degrés. Je ne sais pas ce que vous essayez d'obtenir lorsque vous dites "Physics to Animation", mais j'espère que cela vous aidera.

PS : Ajoutez un -webkit- pour qu'il fonctionne sur chrome et les autres navigateurs webkit. Vous pouvez consulter le fiddle mis à jour pour webkit ICI

Answer 3

J'ai également une image en rotation en utilisant la même chose que vous.

mon site web

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

Answer 4

Si vous voulez retourner une image, vous pouvez l'utiliser.

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

Answer 5

Voici qui devrait vous aider

Le lien jsfiddle ci-dessous vous aidera à comprendre comment faire pivoter une image, j'ai utilisé le même pour faire pivoter le cadran d'une horloge.

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

Où : - t : heure actuelle,

- b : valeur initiale,

- c : changement de valeur,

- d : durée,

- x : inutilisé

Pas d'assouplissement (assouplissement linéaire) : function(x, t, b, c, d) { return b+(t/d)*c ; }