0

I have a div. It rotated at -35 degree( set in CSS file) , I want to click it to rotate it back to 0 degree

here is my code JS file

$("div#words").on("click",function(e){
$(this).animate({
        "height":"200",
        "border-radius":"200"
        },{duration:500,step:function(now,fx){
            $(this).css("-ms-transform","rotate("+now+"deg)");
            $(this).css("-webkit-transform","rotate("+now+"deg)");
            $(this).css("transform","rotate("+now+"deg)");

            }},function(e){
                });
});

Now it rotate about 180 degree, how can i set it to a certain degree ?

1 Answers1

0

This question is always answered
Jquery rotate a div

JS:

$("div#words").on("click",function(e){
$(this).animate({
        "height":"200",
        "border-radius":"200"
        },{duration:500,step:function(now,fx){
            $(this).addClass('box_rotate');
            }},function(e){
                });
});

CSS:

.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+ */
}

Add a class and define the class. This is an easy and simple way to do that.

Community
  • 1
  • 1
  • Thanks. It worked but the animation and rotation did not move at the same time. the rotation finished first then animation start. Is there any other way to move them together ? – user3265085 Feb 21 '14 at 21:26
  • @user3265085 fiddle.jshell.net/vwatf/1 this, how do you think about it? –  Feb 21 '14 at 22:02
  • http://fiddle.jshell.net/vwatf/23/ like this , but i can rotate and make it round at the same time ? – user3265085 Feb 21 '14 at 22:25
  • uh... i think i know why ... just time difference i have to make animation faster to catch up the transform.. – user3265085 Feb 21 '14 at 22:27
  • As i can see your question is answered :) –  Feb 21 '14 at 23:09