How to rotate a DIV through CSS or Javascript

[Sura]

Hi

Is it possible to rotate a DIV to any particular angle (e.g. 21
degrees) by CSS or Javascript? I have seen samples on the net which
rotates it to 90, 180 and 270, yet I am looking at flexibility with
the angle. Also The content inside the DIV should not get distorted as
it happens with some example which I have seen where an image is being
rotated.

Please let me know if you are aware of a solution.

Thanks

 

[Martin Honnen]

Is it possible to rotate a DIV to any particular angle (e.g. 21
degrees) by CSS or Javascript? I have seen samples on the net which
rotates it to 90, 180 and 270, yet I am looking at flexibility with
the angle. Also The content inside the DIV should not get distorted as
it happens with some example which I have seen where an image is being
rotated.

Safari supports a CSS property -webkit-transform that you can script as
follows (rotating the body here but could of course rotate any element):

document.body.style.webkitTransform = 'rotate(31deg)';

Firefox 3.5 supports a similar property -moz-transform:
https://developer.mozilla.org/En/CSS/Using_CSS_transforms
that you could script as element.style.mozTransform.

 

[Jorge]

Safari supports a CSS property -webkit-transform that you can script as
follows (rotating the body here but could of course rotate any element):

document.body.style.webkitTransform = 'rotate(31deg)';

Awesome

javascriptfunction (a) { setTimeout(function f () { if ((a-=a/8) >
0.05) { document.body.style.webkitTransform = 'rotate('+a+'deg)';
setTimeout(f,0); } else { document.body.style.webkitTransform = 'rotate
(0deg)'; a=360; setTimeout(f,2222); } },0);})(360);

(works in Safari 4)

 

[-TNO-]

Internet Explorer browsers support rotations as well by using the
matrix filter:

http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx