CSS3 Rotation Animation

 

Impossible de faire fonctionner cette image animée, elle est supposée faire une rotation de 360 ​​degrés.

Je pense que quelque chose ne va pas avec le CSS ci-dessous, car il rest juste immobile.

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

    Voici une démo . La bonne animation 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); } } 
      

    J’ai une image en rotation en utilisant la même chose que vous:

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

    Pour réaliser la rotation à 360 degrés, voici la solution de travail .

    Le HTML:

      

    Le CSS:

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

    Vous devez survoler l’image et vous obtiendrez l’effet de rotation à 360 degrés.

    PS: Ajoutez une extension -webkit- pour qu’elle fonctionne sur les navigateurs chrome et autres webkit. Vous pouvez vérifier le violon mis à jour pour webkit ICI

    Si vous voulez retourner l’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); } } 

    Ici cela 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: changer la valeur,

    • d: durée,

    • x: non utilisé

    Pas d’accélération (assouplissement linéaire): fonction (x, t, b, c, d) {retour b + (t / d) * c; }