I was trying to set the rotation of images using CSS and because some calculations were needed, used jQuery to apply that. I tried:

$(element).css("-webkit-transform", "rotation ("+ 180 + "deg)")

And its not working!

Where's the problem?

3 answers

danwellman 5600
2
points

The CSS value is rotate not rotation, the following jQuery works for me:

$(".rotate").css("-webkit-transform", "rotate(30deg)");

Tested on Safari 3.2.1 on Win

Answered about 10 years ago by danwellman
0
points

Uh! I can't believe how I did that mistake. Thank you. Is there a way we could animate the rotation?

Answered about 10 years ago by Hassan Derakhshandeh
danwellman 5600
0
points

sure, something like

$(function() {

  //function to do animation
  function rotate() {
    $(".rotate").animate({
      "-webkit-transform", "rotate(45deg)"
    }, "normal", function() {

      //recursively call the animate function for continuous anim
      rotate();
    });
  }

  //function to stop anim, call it when certain condition met
  function stop() {
    $(".rotate").stop();
  }

  //start anim for first time
  rotate();
});

This may need a little tweak but essentially it should provide a reasonably smooth, continuous animation. You could easily make it better by, e.g. passing into the rotate function the element to animate so that it could become a factory method for producing animations on any element, or you could pass in the speed of the animation etc

Answered about 10 years ago by danwellman