Rotating a Div Element in jQuery

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.

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.

Cross-browser rotate for any element. Works in IE7 and IE8. In IE7 it looks like not working in JSFiddle but in my project worked also in IE7

http://jsfiddle.net/RgX86/24/

var elementToRotate = $('#rotateMe');var degreeOfRotation = 33;var deg = degreeOfRotation;var deg2radians = Math.PI * 2 / 360;var rad = deg * deg2radians ;var costheta = Math.cos(rad);var sintheta = Math.sin(rad);var m11 = costheta;var m12 = -sintheta;var m21 = sintheta;var m22 = costheta;var matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')    .css('-moz-transform','rotate('+deg+'deg)')    .css('-ms-transform','rotate('+deg+'deg)')    .css('transform','rotate('+deg+'deg)')    .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')    .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');

Edit 13/09/13 15:00Wrapped in a nice and easy, chainable, jquery plugin.

Example of use

$.fn.rotateElement = function(angle) {    var elementToRotate = this,        deg = angle,        deg2radians = Math.PI * 2 / 360,        rad = deg * deg2radians ,        costheta = Math.cos(rad),        sintheta = Math.sin(rad),        m11 = costheta,        m12 = -sintheta,        m21 = sintheta,        m22 = costheta,        matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;    elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')        .css('-moz-transform','rotate('+deg+'deg)')        .css('-ms-transform','rotate('+deg+'deg)')        .css('transform','rotate('+deg+'deg)')        .css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')        .css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');    return elementToRotate;}$element.rotateElement(15);

JSFiddle: http://jsfiddle.net/RgX86/175/