<img class="image" src="" alt="" width="120" height="120">
Не удается заставить это анимированное изображение работать, предполагается, что он вращается на 360 градусов.
Я думаю, что-то не так с CSS ниже, так как он просто остается на месте.
.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
", он уменьшит их до минимального размера, хотя, как и в случае с дисплеем: inline-blockУ меня есть вращающееся изображение, использующее то же самое, что и вы:
источник
transform:rotate(360deg);
для IEДля достижения поворота на 360 градусов, вот рабочий раствор .
HTML:
CSS:
Вы должны навести курсор на изображение, и вы получите эффект поворота на 360 градусов.
PS: добавьте
-webkit-
расширение, чтобы оно работало в браузерах chrome и других webkit. Вы можете проверить обновленную скрипку для webkit ЗДЕСЬисточник
-webkit-tranform
его для работы. Вот обновленная скрипка. jsfiddle.net/sELBM/172 - @JustPlainHigh-webkit-
префикс больше не нужен и может быть безопасно удален. Поддержка браузера: caniuse.com/#search=transformsесли вы хотите перевернуть изображение, вы можете использовать его.
источник
источник
попробуй это легко
источник
Здесь это должно помочь вам
Приведенная ниже ссылка jsfiddle поможет вам понять, как вращать изображение. Я использовал его для вращения циферблата часов.
http://jsfiddle.net/xw89p/
Где: • t: текущее время,
• b: начальное значение,
• c: изменить значение,
• d: продолжительность,
• х: не используется
Без замедления (линейное ослабление): функция (x, t, b, c, d) {return b + (t / d) * c; }
источник