Rotate a DIV using jQuery with a certain degree?

Question

Possible duplicate:
Rotate a div element in jQuery

How would I rotate the DIV and all elements inside to a certain extent using jQuery? For example, instead of 90, 180, etc. I could set it to 88.

Answer 1

Here is the code for modern browsers with CSS (used 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)' }); 

See the transform ^docs property

Answer 2

In HTML you cannot - text orientations other than horizontal and vertical are not supported. If you insert SVG, you can get a text rotation there. This has nothing to do with the limitations of jQuery, it's just how HTML works.

EDIT: Yes. Cool. Til.

So 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 nicely by typing it into a class and calling $(element).addClass("myObliqueClass") .

Answer 3

I think your best chance for this is to use CSS and then use jquery to disable the css class that applies to the object, as you can see here: http://answers.oreilly.com/topic/1004-how- to-rotate-an-image-with-css /

Good luck

CEC

Answer 4

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 the image, you only need $('#myImage').rotate(30) //for a 30 degree rotation Where #myImage is the identifier of the element you want to rotate.