<img class="image" src="" alt="" width="120" height="120">
Dieses animierte Bild kann nicht funktionieren, es soll eine 360-Grad-Drehung ausführen.
Ich denke, mit dem unten stehenden CSS stimmt etwas nicht, da es einfach still bleibt.
.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
", es wird sie jedoch auf die minimale Größe verkleinern, ähnlich wie bei der Anzeige: Inline-BlockIch habe ein rotierendes Bild, das dasselbe verwendet wie Sie:
quelle
transform:rotate(360deg);
für IEUm die 360-Grad-Drehung zu erreichen, finden Sie hier die Arbeitslösung .
Der HTML:
Das CSS:
Sie müssen mit der Maus über das Bild fahren und erhalten den 360-Grad-Rotationseffekt.
PS: Fügen Sie eine
-webkit-
Erweiterung hinzu, damit sie auf Chrome und anderen Webkit-Browsern funktioniert. Sie können die aktualisierte Geige für das Webkit HIER überprüfenquelle
-webkit-tranform
damit es funktioniert. Hier ist die aktualisierte Geige. jsfiddle.net/sELBM/172 - @JustPlainHigh-webkit-
Präfix wird nicht mehr benötigt und kann sicher entfernt werden. Browser-Unterstützung: caniuse.com/#search=transformsWenn Sie das Bild spiegeln möchten, können Sie es verwenden.
quelle
quelle
versuche es einfach
quelle
Hier soll dir das helfen
Der folgende jsfiddle-Link hilft Ihnen zu verstehen, wie man ein Bild dreht. Ich habe das gleiche verwendet, um das Zifferblatt einer Uhr zu drehen.
http://jsfiddle.net/xw89p/
Wo: • t: aktuelle Zeit,
• b: Anfangswert,
• c: Wertänderung,
• d: Dauer,
• x: nicht verwendet
Keine Lockerung (lineare Lockerung): Funktion (x, t, b, c, d) {Rückgabe b + (t / d) * c; }}
quelle