Just discovered a lovely little add-on to jQuery that allows rotation. You can grab it at http://code.google.com/p/jquery-rotate/
It’s simple to implement, just include the script in the head and once the page has loaded:
$('#image_to_rotate').rotateLeft();
Ta-da! 90° rotation counter-clockwise. You can also use rotateRight() for clockwise rotation or even specify the number of degrees
$('#image_to_rotate').rotateLeft(45);
The plug-in works using the DXImageTransform filter in IE and the Canvas element in other browsers. Unfortunately, it doesn’t work in Safari…
Ordinarily I wouldn’t be too concerned about Safari, but I came across this with a specific task in mind that would be mostly used on iPhone. That meant mobile Safari was the main player to worry about.
Safari does support the webkit-transform property though so by adding
$(document).ready(function(){ if ($.browser.safari){ $('#image_to_rotate').css("-webkit-transform", "rotate(" + 15 + "deg)"); } else { $('#image_to_rotate').rotateRight(15); } });
we can extend browser support to include Safari and iPhone.
There are still some inconsistencies to be wary of here though as Safari renders the rotated image on top of the preceding <p>. I’ve also noticed the rotation can sometimes not happen in FF when the page/image isn’t cached but still, jquery-rotate’s a nice hold-over until HTML5 arrives.
You didn't think it'd be that easy, did you?
Check out the results here. (Tested in Safari, mobile Safari on iPhone, FireFox 3, Internet Explorer, Chrome)