How to rotate an image using client side solution

Question

I am wondering if there is any way to dynamically rotate an image or invert an image using a client side solution? I don't care if it is plain old javascript, jquery plugin, css. I just wondered if there was some way to do this dynamically on the client side rather than having to write server side code to do for each image which I can do.

I tried searching on Google for different keywords but couldn't find anything.

EDIT: I am looking for a solution that does not require anything from HTML 5.

Answer 1

You can do it using the canvas element, as shown here. I'm not 100% sure all browsers support it already. It is part of HTML5 (read more about it on Wikipedia), so FF, Safari and Chrome support it. Not sure about IE8.

Answer 2

Firefox, Safari and Opera support this:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);

you can also do this in IE8, maybe even 7(?):

position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

rotate an element using JS:

var deg = 90
$('element').style.MozTransform = 'rotate(' + deg + 'deg)';
$('element').style.WebkitTransform = 'rotate(' + deg + 'deg)';

edit:

wow, according to http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx the rotation works for IE 5.5!