<img class="image" src="" alt="" width="120" height="120">
Impossible de faire fonctionner cette image animée, elle est censée faire une rotation de 360 degrés.
Je suppose que quelque chose ne va pas avec le CSS ci-dessous, car il reste 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);
}
}
}
float:left won't work on absolutely positioned elements
", il les réduira à la taille minimale, similaire à ce qui est affiché: le bloc en ligne le faitJ'ai une image tournante utilisant la même chose que vous:
la source
transform:rotate(360deg);
pour IEPour réaliser la rotation à 360 degrés, voici la solution de travail .
Le HTML:
Le CSS:
Vous devez survoler l'image et vous obtiendrez l'effet de rotation à 360 degrés.
PS: ajoutez une
-webkit-
extension pour qu'il fonctionne sur les navigateurs Chrome et autres webkit. Vous pouvez consulter le violon mis à jour pour le webkit ICIla source
-webkit-tranform
pour que cela fonctionne. Voici le violon mis à jour. jsfiddle.net/sELBM/172 - @JustPlainHigh-webkit-
le préfixe n'est plus nécessaire et peut être supprimé en toute sécurité. Prise en charge du navigateur: caniuse.com/#search=transformssi vous voulez retourner l'image, vous pouvez l'utiliser.
la source
la source
essayez ce facile
la source
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/
Où: • t: heure actuelle,
• b: valeur de début,
• c: changement de valeur,
• d: durée,
• x: inutilisé
Pas d'assouplissement (assouplissement linéaire): fonction (x, t, b, c, d) {return b + (t / d) * c; }
la source