4

Possible Duplicate:
Rotating a Div Element in jQuery

How would I rotate a DIV and all the elements inside to a certain degree using jQuery? Like instead of just 90, 180, etc.. I would be able to set it at say 88.

Community
  • 1
  • 1
Earl Larson
  • 5,051
  • 6
  • 27
  • 29
  • Perhaps but mine was specifically to see if you could rotate a div to a specific degree. I know how to rotate a div like a solid 90 degrees but I wanted a different number. – Earl Larson Apr 04 '11 at 02:39
  • See [the Q that this is a duplicate of](http://stackoverflow.com/q/382591/331508). The answers show methods to rotate to arbitrary degrees. – Brock Adams Apr 04 '11 at 03:01

4 Answers4

8

Here is the code for the modern browsers with CSS (applied through jquery for your case)

$('#divID').css({
     '-moz-transform':'rotate(88deg)',
     '-webkit-transform':'rotate(88deg)',
     '-o-transform':'rotate(88deg)',
     '-ms-transform':'rotate(88deg)',
     'transform':'rotate(88deg)'
});

Have a look at the transform docs property

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • 1
    Yeah except what everyone that suggests this fails to mention is that text looks like crap in IE when it's rotated. I using Arial font and when it rotates using the ms transform it looses ALL anti-aliasing. – Andrew Christensen Mar 30 '13 at 15:09
2

In HTML, you can't - text orientations different than horisontal and vertical are not supported. If you embed SVG, you can get text rotation there. It has nothing to do with jQuery limitations, it's just how HTML works.

EDIT: Huh. Cool. TIL.

Okay then, just do what they do: set CSS to:

transform: rotate(88deg);
-webkit-transform: rotate(88deg);
-moz-transform: rotate(88deg);

You can do it with

$(element).css({ "transform": "rotate(88deg)", "-webkit-transform": "rotate(88deg)", "-moz-transform": "rotate(88deg)" });

or do it more prettily by stuffing that into a class and invoking $(element).addClass("myObliqueClass").

Amadan
  • 191,408
  • 23
  • 240
  • 301
2

I think your best shot at this is to use CSS and then use jquery to switch out the css class that is being applied to the object like you can see here : http://answers.oreilly.com/topic/1004-how-to-rotate-an-image-with-css/

Good luck,

CEC

Cos Callis
  • 5,051
  • 3
  • 30
  • 57
2

Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/. It is supported by all major browsers

* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome

To rotate an image, All you need to do is $('#myImage').rotate(30) //for a 30 degree rotation Where #myImage is the id of the element you want rotated.

Hussein
  • 42,480
  • 25
  • 113
  • 143