Where would you click to rotate the image?

asked Jan 18, 2013 at 10:11

0

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, 2013 at 10:30

muthumuthu

5,2272 gold badges32 silver badges41 bronze badges

2

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

ATOzTOAATOzTOA
33.8k22 gold badges93 silver badges116 bronze badges
0
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/
 answered Jul 28, 2017 at 20:39

RossittenRossitten
1,1681 gold
badge16 silver badges34 bronze badges
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, 2013 at 10:28
 
JasonJason
1,2881 gold badge16 silver badges25 bronze badges
1
try this:
$('img').click(function(){
$('img').rotate({ angle: 0, bind:{
    "click":function(){
      $(this).rotate({animateTo:360});
    }
  }
 });
});
 answered Jan 18, 2013 at 10:46



 
JaiJai
73.5k12 gold badges73 silver badges101 bronze badges
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.
 answered Jan 18, 2013 at 10:18
 
Rachel GallenRachel Gallen
27.4k21 gold badges75 silver badges79 bronze badges
0
 

How do I Rotate an image?
Move the mouse pointer over the image. Two buttons with arrow will appear at the bottom. Select either Rotate the image 90 degrees to the left or Rotate the image 90 degrees to the right.
...
Rotate a picture..
 
Where do you click to Rotate an image or word art?
You can create the effect of a mirror image or flip an object upside-down (invert it) by using the Flip tools..
 
Select the object to rotate..
 
Go to Shape Format, Drawing Tools or Picture Tools > Format, select Rotate, and then: To turn an object upside-down, select Flip Vertical..
 
Which option is used to Rotate the image?
Answer: On the Home tab, click the Rotate option. Select a Rotate option from the list and the image will be rotated.
How do I Rotate an image in PowerPoint?
In PowerPoint, you can rotate or flip objects like text boxes, shapes, and pictures. Tap the object that you want to rotate. Select the rotation handle at the top of the object, and then drag in the direction that you want. To flip an object, select Arrange > Rotate > Flip Vertical or Flip Horizontal.