jquery rotate image onclick

Question

I am trying to achieve this (90 degree rotation), but it fails without errors. This image is within a TAG where it has already a toggle jque

Answer 1

Use a combination of css rules -webkit-transform and -moz-transform on image click.For example to rotate image by 90 degree apply following css rules on click

$('img').click(function(){
    $(this).css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)" /* For modern browsers(CSS3)  */
    });
});

Answer 2

checkout this: JqueryRotate

this have little things to do, you can see one code example in the image itself.

So in your case you can do this:

$(document).ready(function(){
   $('img[src^="down_arrow"]').click(function(){
      $(this).rotate(90);
   });
});

Answer 3

I used the answers above and created a method to do incremental rotation, by storing the current rotation in a data attribute on the target element. In other words, every time you call the function, it will add to the existing rotation.

// Increments the rotation (in degrees) for the element with the given id
function addRotation(id, degrees) {
    var control = $('#' + id);
    var currentRotation = control.data('rotation');
    if (typeof currentRotation === 'undefined') currentRotation = 0;

    degrees += parseInt(currentRotation);

    control.css({
        'transform': 'rotate(' + degrees + 'deg)',
        '-ms-transform': 'rotate(' + degrees + 'deg)',
        '-moz-transform': 'rotate(' + degrees + 'deg)',
        '-webkit-transform': 'rotate(' + degrees + 'deg)',
        '-o-transform': 'rotate(' + degrees + 'deg)'
    });

    control.data('rotation', degrees);
}

Usage:

<img id='my-image' />

addRotation('my-image', 90);
addRotation('my-image', -90);

Answer 4

This is the example to rotate image 90deg as following code bellow:

$(document).ready(function(){
    $("img").click(function(){
         $(this).rotate(90);
    });
 });

Answer 5

This will enable you to perform an additional rotation of each clik

var degrees = 0;
$('.img').click(function rotateMe(e) {

    degrees += 90;

    //$('.img').addClass('rotated'); // for one time rotation

    $('.img').css({
      'transform': 'rotate(' + degrees + 'deg)',
      '-ms-transform': 'rotate(' + degrees + 'deg)',
      '-moz-transform': 'rotate(' + degrees + 'deg)',
      '-webkit-transform': 'rotate(' + degrees + 'deg)',
      '-o-transform': 'rotate(' + degrees + 'deg)'
    }); 

});     

https://jsfiddle.net/Lnckq5om/1/

Answer 6

Consider a jQuery extension such as: jQueryRotate

It'll make the rotating inside the onclick much easier and more readable.