3

Доброго времени суток! Не могу сообразить, как реализовать поворот картинки на 45 и -45 градусов непрерывано, то есть, картинка все время наклоняется то в одну, то в другую сторону. Пока только при наведении мыши реализовано:

<img id="image" src="4.png">

<script type="text/javascript">  
        $(document).ready(function(){  
            jQuery("#image").rotate({ bind:{  
                mouseover:function(){ $(this).rotate({animateTo:45}) },  
               mouseout:function(){ $(this).rotate({animateTo:-45}) }  
          }});       

        });  
</script>  
2
  • Почитайте про setTimeout и setInterval. 9 ноя 2016 в 11:39
  • Уже пробовала, так не получается вообще. callback еще использовала. Я не могу понять сам алгоритм
    – www
    9 ноя 2016 в 11:49

2 ответа 2

3

Сделал на CSS

#me {
    -webkit-animation: rotation 2s infinite linear;
    padding: 20px;
    border-radius: 50%;
}

@-webkit-keyframes rotation {
0%   {-webkit-transform: rotate(0deg);}
25%  {-webkit-transform: rotate(45deg);}
50%   {-webkit-transform: rotate(0deg);}
75%  {-webkit-transform: rotate(-45deg);}
100%   {-webkit-transform: rotate(0deg);}
}
<img id="me" src="http://cliparts.co/thumbnail/5TR/Ka6/5TRKa6dXc.jpg">

3
  • Спасибо большое! Но, к сожалению, теперь не могу настроить кроссбраузерность.
    – www
    9 ноя 2016 в 12:10
  • @www в этом поможет префиксер: autoprefixer.github.io/ru
    – Crantisz
    9 ноя 2016 в 18:13
  • Спасибо! теперь подойдет) Осталось мне разобраться, как добавить к этому прыжок на css. На JS я знаю, как сделать, потому и не спрашивала в этом вопросе.
    – www
    10 ноя 2016 в 10:00
2

Позволил себе чуть изменить код Abmin чтобы подходил по условию:

#me {
  -webkit-animation: rotation 2s infinite linear;
  padding: 20px;
}
@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(90deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
<img id="me" src="http://www.clker.com/cliparts/T/G/C/H/K/W/no-sign-th.png">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.