Want to rotate element in jquery

Question

I am trying to rotate an element (any element div,p..) with the handle (handle=>div) which I placed on the element's top-left corner, now my problem is that the element does not fully rotate to 360 degree, can anyone please help out :

$("#elementid").live('mouseover', function () {
    $(this).draggable({ handle: "#handleid", drag: function (event, ui) {
        var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
        alert(ui.position.left);
        $(this).parent().parent().css({
            '-moz-transform': rotateCSS,
            '-webkit-transform': rotateCSS
        });
    }
    });
});

greate comment @PriyankPatel is right but i think he meant to animate 360degree right — shareef, Jun 06 '12 at 05:52
i means to say 0 degree to 360 degree ,only clever person can understand this :) — King Kong, Jun 06 '12 at 05:57
@KingKong what you meant from right to left rotation or clockwise rotation like — shareef, Jun 06 '12 at 06:01

score 3 · Accepted Answer · edited May 23 '17 at 12:01

these are question in stackoverflow in the same category

how to rotating div

trying to rotate a div element with jQuery controlling css3 transform command

Rotating a Div Element in jQuery

How to rotate a div using jQuery

take alook at the second link its briliant

live rotate and other css demo brillian http://css3please.com/

take a look at this to be precise

.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
      -ms-transform: rotate(7.5deg);  /* IE9 */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
          transform: rotate(7.5deg);
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
}

UPDATE:

note this nice addition in middle of the page of note this on http://css3please.com/

you can manipulate what ever you want to generate code live

Thanks for answer @shareef, but i want to know that, is there any scope in my code, by which, i can achieve what i want? — King Kong, Jun 06 '12 at 06:07
yes if i understand correctly you should add the .box_rotate class to the element you want to rotate like in this link example using addClass and removeClass to the div,p or any element you wish : **Adds the specified class(es) to each of the set of matched elements.** **.addClass( className )** classNameOne or more class names to be added to the class attribute of each matched element. [JQuery API .addClass](http://api.jquery.com/addClass/) [JQuery API .removeClass()](http://api.jquery.com/removeClass/) — shareef, Jun 06 '12 at 06:14

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

You can rotate with Jquery rotate. Check fallowing example:

$(img).css('-moz-transform', 'rotate(' + degree + 'deg)');

$(img).css('-webkit-transform', 'rotate(' + degree + 'deg)');

$(img).css('-o-transform', 'rotate(' + degree + 'deg)');

$(img).css('-ms-transform', 'rotate(' + degree + 'deg)');

$(img).css('transform', 'rotate(' + degree + 'deg)');

You can also refer CSS Matrix Rotation

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 06 '12 at 06:22

sreekanth

709
2
9
20

Want to rotate element in jquery

2 Answers2

Linked