Rotate image with onclick

Question

I try to make a toggle button where my image (an arrow) will be rotated by 180 degrees each click:

<a href='#' onclick='$(\"#divToggle\").slideToggle(\"slow\");'>
<img src='blue_down_arrow.png' onclick='$(this).rotate(180);' /></a>

<div id='divToggle' style='display:none;'>...CONTENT...</div>";

This code toggle my div but the image rotates only for the first click and then stays "up". I am using this : http://code.google.com/p/jqueryrotate/

score 3 · Answer 1 · answered Jan 18 '13 at 10:30

3

You may write like this. demo

jQuery(document).ready(function(){
   var deg_temp =45;
  jQuery("#image1").click(function(){
     deg_temp = deg_temp+30;
  jQuery(this).rotate(deg_temp);
  })

});

answered Jan 18 '13 at 10:30

muthu

5,381
2
33
41

How would you grab the rotated image to save/replace the current one? – alikuli Feb 09 '19 at 10:14
Now add transition: 1s and tell me how to fix that :D – Bojidar Stanchev Jun 04 '20 at 12:39

score 2 · Accepted Answer · answered Jan 18 '13 at 10:25

This is because the value for rotate angle is absolute, not based on the last rotate.

Working code:

jQuery

var rotate_factor = 0;

function rotateMe(e) {
    rotate_factor += 1;
    var rotate_angle = (180 * rotate_factor) % 360;
    $(e).rotate({angle:rotate_angle});
}

HTML

<img src='blue_down_arrow.png' onclick='rotateMe(this);' /></a>

Update: Shorter code

var rotate_angle = 0;

<img src='blue_down_arrow.png' onclick='rotate_angle = (rotate_angle + 180) % 360; $(this).rotate(rotate_angle);' /></a>

score 2 · Answer 3 · answered Jul 28 '17 at 20:39

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/

Rachel Gallen · Answer 4 · 2016-10-07T16:49:23.270

1

Use CSS3 for the rotation:

In Mozilla Firefox this will be -moz-transform: rotate(180deg)
In Webkit based browsers, i.e. Chrome: -webkit-transform: rotate(180deg)
In Opera: -o-transform: rotate(180deg)
In IE: -ms-transform: rotate(180deg) (only IE9)
In pre-IE9: not easily possible, will need the use of Matrix Filter

Use jQuery rotate plugin to unify all the browser differences.

edited Oct 07 '16 at 16:49

answered Jan 18 '13 at 10:18

Rachel Gallen

27,943
21
72
81

score 1 · Answer 5 · answered Jan 18 '13 at 10:28

1

Click to see CSS3 transition demo

check out this demo. It uses CSS3 for transition + transform rotating

.testRotate{
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.testRotate:hover{
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

these are vital part of this demo =)

answered Jan 18 '13 at 10:28

Jason

1,298
1
16
27

1

But the question asks for on click rotate, not on hover. – Dhruv Sangvikar Sep 06 '17 at 20:20

score 1 · Answer 6 · answered Jan 18 '13 at 10:46

1

try this:

$('img').click(function(){
$('img').rotate({ angle: 0, bind:{
    "click":function(){
      $(this).rotate({animateTo:360});
    }
  }
 });
});

answered Jan 18 '13 at 10:46

Jai

74,255
12
74
103

Rotate image with onclick

6 Answers6

Linked