<img class="image" src="" alt="" width="120" height="120">
Nie można uruchomić tego animowanego obrazu, powinien on obracać się o 360 stopni.
Myślę, że coś jest nie tak z CSS poniżej, ponieważ po prostu się nie porusza.
.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
”, zmniejszy je jednak do minimalnego rozmiaru, podobnie jak w przypadku wyświetlania: blok wbudowanyMam obracający się obraz, używając tej samej rzeczy, co ty:
źródło
transform:rotate(360deg);
dla IEAby uzyskać obrót o 360 stopni, oto rozwiązanie robocze .
HTML:
CSS:
Musisz najechać myszką na obraz i uzyskasz efekt obrotu o 360 stopni.
PS: Dodaj
-webkit-
rozszerzenie, aby działało na Chrome i innych przeglądarkach webkit. Zaktualizowany skrzynkę dla webkita możesz sprawdzić TUTAJźródło
-webkit-tranform
, aby działało. Oto zaktualizowane skrzypce. jsfiddle.net/sELBM/172 - @JustPlainHigh-webkit-
Prefiks nie jest już potrzebny i można go bezpiecznie usunąć. Obsługa przeglądarek: caniuse.com/#search=transformsjeśli chcesz przerzucić obraz, możesz go użyć.
źródło
źródło
spróbuj tego łatwo
źródło
To powinno ci pomóc
Poniższy link jsfiddle pomoże ci zrozumieć, jak obracać obraz. Użyłem tego samego, aby obrócić tarczę zegara.
http://jsfiddle.net/xw89p/
Gdzie: • t: aktualny czas,
• b: wartość początkowa,
• c: zmiana wartości,
• d: czas trwania,
• x: nieużywany
Bez luzowania (liniowe): funkcja (x, t, b, c, d) {return b + (t / d) * c; }
źródło