How to rotate using JS?

Question

PHP

Good day.

Trying to make just one rotation of an image using JS

Original here: jsfiddle.net/JydNZ/51

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

It is necessary to correct this code so that when you press it again, the picture does not turn back, but when you press it again, the cycle repeats (that is, the picture should rotate 360 ​​degrees when pressed).

I would be very grateful, because the task seems to be the simplest, but I can’t do it from this code.

Answer 1

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

Answer 2

I suggest making css animation instead of using js

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

Answer 3

Something like this: 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

Each time you press +90°
jsfiddle.net/1qzxnabg