Jquery rotate a div

Question

I am unable to rotate a div. There are no warnings or errors in console.

You can check out the JSFiddle version here.

The code I am using is -

$("#div2").click(someFunction2);

function someFunction2() {
    $("#div2").animate({
        rotate: '+=-40deg'
    }, 0);
}

What am I doing wrong?

`.animate()` doesn't support rotation directly. See [jquery animate a rotating div](http://stackoverflow.com/questions/9776015/jquery-animate-a-rotating-div) and [jQuery: how do I animate a div rotation?](http://stackoverflow.com/questions/3789984/jquery-how-do-i-animate-a-div-rotation) — JJJ, Mar 20 '13 at 07:50
http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery It can help you. I hope I helped. — Haroldo Gondim, Mar 20 '13 at 07:52
http://stackoverflow.com/questions/382591/rotating-a-div-element-in-jquery It can help you. I hope I helped. — Haroldo Gondim, Mar 20 '13 at 07:56

score 7 · Accepted Answer · answered Mar 20 '13 at 07:58

You can try adding some css classes with css3.0 properties instead:

.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(7.5deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(7.5deg);  /* IE 9 */
        -o-transform: rotate(7.5deg);  /* Opera 10.50-12.00 */
         transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}
.box_transition {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}

jQuery:

function someFunction2() {
    $(this).addClass('box_rotate box_transition');
}

CHECKOUT THIS FIDDLE

Great workaround, I love it! @TomSarduy simply remove the class to make it rotate as many time as you want. — Etienne Dupuis, Oct 16 '13 at 15:10

score 4 · Answer 2 · edited Aug 19 '15 at 22:34

4

This can help you:

function someFunction2() {
    $("#div2").animate(
        {rotation: 360},
        {
          duration: 500,
          step: function(now, fx) {
              $(this).css({"transform": "rotate("+now+"deg)"});
          }
        }
    );
}

Enjoy!

edited Aug 19 '15 at 22:34

Eddie Monge Jr

12,676
2
19
24

answered Mar 20 '13 at 07:59

Subedi Kishor

5,906
5
35
53

score 1 · Answer 3 · answered Mar 20 '13 at 08:19

1

The best way to do this is using CSS3, but if you are not comfortable with CSS3, you can use jQueryRotate plugin to achieve this:

$("#div2").click(function(){ 
    //Getting the current angle
    var curAngle = parseInt($(this).getRotateAngle()) || 0;
    $(this).rotate({
        angle: curAngle,
        animateTo: curAngle - 30,
        duration: 1000
    });
});

Your Fiddle Updated: http://jsfiddle.net/NYJWx/5/

answered Mar 20 '13 at 08:19

Tomas Ramirez Sarduy

17,294
8
69
85

1

Just to mention, to rotate div that supports IE too please use version 3.2 from trunk (2.2 version by default support tag only) https://code.google.com/p/jqueryrotate/source/browse/#svn%2Ftrunk – Paweł Witkowski Photography Mar 25 '13 at 15:41

Jquery rotate a div

3 Answers3

CHECKOUT THIS FIDDLE

Linked