Как с помощью JS сделать поворот?

Question

[Борис Белов]

Доброго дня.

Пытаюсь сделать лишь один поворот картинки с помощью JS

Оригинал тут: jsfiddle.net/JydNZ/51

$(document).ready(function(){
    $('#icon').toggle(function(){
        $(this).css("-webkit-transform","rotate(360deg)");
    }, function(){
        $(this).css("-webkit-transform","rotate(90deg)");
    });
});

Нужно поправить этот код так, чтобы при повторном нажатии картинка не поворачивалась обратно, а при повторном нажатии цикл повторялся (то есть картинка должна при нажатии поворачиваться на 360 градусов)

Буду очень благодарен, ибо вроде задача простейшая, а из этого кода не могу сделать.

Answer 1

[Максим]

$(document).ready(function(){
    var i = 1
    $('#icon').click(function(){
       $(this).css("-webkit-transform","rotate("+i*360+"deg)");
       i++;
    });
});

Comments

[Борис Белов]

cnua.tmweb.ru у меня внизу я подставил ваш скрипт, и не работает кнопка. хотя в jsfiddle работает. не подскажите из за чего может быть?

Answer 2

[Дмитрий Кравченко]

Предложу сделать css анимацию вместо использования js

.target:hover,
.target:active{
animation: rotate 0.5s ease-in-out;
}
keyframes rotate{
to{
transform:rotate(360deg);
}
}

Comments

[Борис Белов]

Ничего не выходит. Могли бы скинуть на JSfiddle пожалуйста?

[Дмитрий Кравченко]

без js таки не обошлось, :active заставляет держать кнопку мыши
codepen.io/imdmitrykravchenko/pen/jbLJpV

Answer 3

[Денис Инешин]

Как то так: jsfiddle.net/IonDen/o4kbgvoy

$(document).ready(function(){
    $('#icon').on('click', function(){
        var $this = $(this);
        
        if ($this.hasClass('animated')) {
            return;
        }
        
        $this.addClass('animated');
        $this.css("transform","rotate(360deg)");
        
        setTimeout(function () {
            $this.removeClass('animated');
            $this.css("transform","rotate(0deg)");
        }, 800);
    });
});

CSS:

#icon{
    overflow:hidden;
}
.animated {
    -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;    
}

Answer 4

[Stalker_RED]

При каждом нажатии +90°
jsfiddle.net/1qzxnabg