<img class="image" src="" alt="" width="120" height="120">
Tidak dapat membuat gambar animasi ini bekerja, seharusnya melakukan rotasi 360 derajat.
Saya kira ada yang salah dengan CSS di bawah ini, karena hanya diam saja.
.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
", itu akan mengecilkan mereka ke ukuran minimum, mirip dengan apa yang ditampilkan: inline-block tidakSaya memiliki gambar yang diputar menggunakan hal yang sama seperti Anda:
sumber
transform:rotate(360deg);
untuk IEUntuk mencapai rotasi 360 derajat, di sini adalah Solusi Bekerja .
HTML:
CSS:
Anda harus mengarahkan kursor pada gambar dan Anda akan mendapatkan efek rotasi 360 derajat.
PS: Tambahkan
-webkit-
ekstensi agar bisa berfungsi di chrome dan browser webkit lainnya. Anda dapat memeriksa biola yang diperbarui untuk webkit DI SINIsumber
-webkit-tranform
agar bisa berfungsi. Ini biola yang diperbarui. jsfiddle.net/sELBM/172 - @JustPlainHigh-webkit-
awalan tidak lagi diperlukan dan dapat dihapus dengan aman. Browser dukungan: caniuse.com/#search=transformsjika Anda ingin membalik gambar, Anda dapat menggunakannya.
sumber
sumber
coba ini dengan mudah
sumber
Di sini ini akan membantu Anda
Tautan jsfiddle di bawah ini akan membantu Anda memahami cara memutar gambar. Saya menggunakan yang sama untuk memutar tombol jam.
http://jsfiddle.net/xw89p/
Di mana: • t: waktu saat ini,
• b: mohon nilai,
• c: ubah nilainya,
• d: durasi,
• x: tidak digunakan
Tanpa pelonggaran (pelonggaran linier): fungsi (x, t, b, c, d) {return b + (t / d) * c; }
sumber