'How to rotate image in jquery?

can you please tell me how to rotate a image like that : Take human being body Example : First we stand our face in front side. When I click on image our face goes back side, and Back will come front. I google it find there is method

("#image").rotate(180);

but it not work in my example I try 360 but not work..:(

can you have any image of boy having front and back so that I can also check.?

jqueryjquery-mobile


Solution 1:[1]

Though too late,

("#image").rotate(360); will move image to its original position, therefore although rotation is applied correctly it will appears nothing has changed.

Now your problem seems different than rotation, since image are drawn on 2d it is not possible with single image what you are trying to achieve.

Instead have 2 images one with face front view and another with back view. Make initially one of the image hidden. on click just toggle visibility of image.

Solution 2:[2]

Not possible this type rotation.

User 2 different image like imgFront, imgBack, now on button click event you change the image.

HTML

  <div>
     <img id="img1" href="imgFront.jpg" />
     <img id="img2" href="imgBack.jpg" class="hide" />
  </div>
  <button onclick="change"> Change </button>

JQuery

$('button').click(function(){
   if($('#img1').hasClass('hide')){
     $('#img1').addClass('hide');
     $('#img2').removeClass('hide');
   } else {
     $('#img2').addClass('hide');
     $('#img1').removeClass('hide');
   }
});

Solution 3:[3]

Try doing this to your image.It will turn your image around with 45'.

     $(document).ready(function(){

        $("#image").rotate({angle:45});
 });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 tarunkumar
Solution 2 Mukesh Singh Thakur
Solution 3 Abhi

Related Questions