How to rotate an image using a client solution

Question

I am wondering if there is a way to dynamically rotate the image or invert the image using a client solution? I don't care if it's plain old javascript, jquery plugin, css. I just wondered if there is a way to do this dynamically on the client side, rather than writing server side code for every image I can make.

I tried searching on Google for different keywords, but could not find anything.

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

Answer 1

Firefox, Safari and Opera support this:

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

IE8, , 7 (?):

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

JS:

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

:

wow, http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx IE 5.5!

Answer 2

javascript: http://www.stableflow.com/downloads/jquery-plugins/360-degrees-product-view/ , - , . script. ( ). , :

• ( )
• ( , , )
• .

. Android- (lg p500), iPad iPod touch.

Answer 3

, canvas, . 100%, . HTML5 ( Wikipedia), FF, Safari Chrome. IE8.