CSS3 Поворот анимации

245
<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); 
        }
    }
}
Borsn
источник

Ответы:

521

Вот демо . Правильная анимация CSS:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">


Некоторые примечания к вашему коду:

  1. Вы вложили ключевые кадры в .imageправило, и это неверно
  2. float:left не будет работать на абсолютно позиционированных элементах
  3. Посмотрите на caniuse : IE10 не нуждается в -ms-префиксе
Giona
источник
13
Если кто-то попробует это в своем собственном коде: НЕ ЗАБЫВАЙТЕ в разделе @ внизу
Джек М.
Здравствуйте. Могу ли я остановить анимацию бесконечности вращения через 5 секунд?
MD Ashik
16
Я чуть не выплюнул воду, когда запустил анимацию.
Разгриз
" float:left won't work on absolutely positioned elements", он уменьшит их до минимального размера, хотя, как и в случае с дисплеем: inline-block
gregn3
32

У меня есть вращающееся изображение, использующее то же самое, что и вы:

.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;

     overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}
Райан де Врис
источник
1
добавьте: transform:rotate(360deg);для IE
Пыльный
3
Пожалуйста, выберите местные примеры по сломанным ссылкам на сайте.
evolutionxbox
Ссылка не работает сейчас.
Маркус Бухер
30

Для достижения поворота на 360 градусов, вот рабочий раствор .

HTML:

<img class="image" src="your-image.png">

CSS:

.image {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.image:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

Вы должны навести курсор на изображение, и вы получите эффект поворота на 360 градусов.

PS: добавьте -webkit-расширение, чтобы оно работало в браузерах chrome и других webkit. Вы можете проверить обновленную скрипку для webkit ЗДЕСЬ

Nitesh
источник
Скрипка не работает oO Инспектору Chrome не нравится ваш CSS, а именно «transform» и «transition-property». О, Боже.
Just Plain High
1
Для этого вам нужно добавить -webkit-tranformего для работы. Вот обновленная скрипка. jsfiddle.net/sELBM/172 - @JustPlainHigh
Nitesh
1
2017: теперь это очень хорошо поддерживается и является предпочтительным способом выполнения бесконечных вращений. -webkit-префикс больше не нужен и может быть безопасно удален. Поддержка браузера: caniuse.com/#search=transforms
Alph.Dev
2

если вы хотите перевернуть изображение, вы можете использовать его.

.image{
    width: 100%;
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }
Heo Đất Hades
источник
0

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

Чарльз Мбого
источник
0

попробуй это легко

 
 .btn-circle span {
     top: 0;
   
      position: absolute;
     font-size: 18px;
       text-align: center;
    text-decoration: none;
      -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.btn-circle span :hover {
 color :silver;
}


/* rotate 360 key for refresh btn */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 
 <button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">&#x21bb;</span></button>

Омар Бахш
источник
-6

Здесь это должно помочь вам

Приведенная ниже ссылка jsfiddle поможет вам понять, как вращать изображение. Я использовал его для вращения циферблата часов.

http://jsfiddle.net/xw89p/

var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){       
          return c*(t/d)+b;
      }
   });
}
rotation();

Где: • t: текущее время,

• b: начальное значение,

• c: изменить значение,

• d: продолжительность,

• х: не используется

Без замедления (линейное ослабление): функция (x, t, b, c, d) {return b + (t / d) * c; }

Аби
источник
2
Я бы поддержал этот ответ, если вы предоставите немного больше информации (как вы делаете в скрипке). Я также считаю , вы должны отметить это плагин JQuery , потому что я был , как, «я не знаю , JQuery мог бы сделать это !!! ^ _ ^ смотрит на скрипку ээ ... u_u»
Just Plain High
2
объяснение переменных x, t, b, c, d (как вы делаете в скрипте) и четкое утверждение, что, хотя это не решение CSS, как требует OP, это довольно простое и эффективное решение для плагинов jQuery: )
Just Plain High
3
Downvoted. ОП не запрашивал решение Javascript, особенно плагин jQuery. Придерживайтесь того, что просят.
TheCarver