Rotating a Div Element in jQuery

Question

Trying to rotate a div element...This might be DOM blasphemy, could it work possibly with a canvas element? I'm not sure - if anybody has any ideas of how this could work or why it doesn't, I'd love to know. Thanks.

Answer 1

To rotate a DIV Make use of WebkitTransform / -moz-transform: rotate(Xdeg).

This will not work in IE. The Raphael library does work with IE and it does rotation. I believe it uses canvases

If you want to animate the rotation, you can use a recursive setTimeout()

You could probably even do part of a spin with jQuery's .animate()

Make sure that you consider the width of your element. If rotate an that has a larger width than its visible content, you'll get funny results. However you can narrow the widths of elements, and then rotate them.

Here is a simply jQuery snippet that rotates the elements in a jQuery object. Rotatation can be started and stopped:

$(function() {     var $elie = $(selectorForElementsToRotate);     rotate(0);     function rotate(degree) {            // For webkit browsers: e.g. Chrome         $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});           // For Mozilla browser: e.g. Firefox         $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});            // Animate rotation with a recursive call         setTimeout(function() { rotate(++degree); },5);     } }); 

jsFiddle example

Note:
Taking the degree and increasing it, will rotate the image clockwise. Decreasing the degree of rotation will rotate the image counter clockwise.

Answer 2

yeah you're not going to have much luck i think. Typically across the 3 drawing methods the major browsers use (Canvas, SVG, VML), text support is poor, I believe. If you want to rotate an image, then it's all good, but if you've got mixed content with formatting and styles, probably not.

Check out RaphaelJS for a cross-browser drawing API.