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.

dup : http://stackoverflow.com/questions/968642/rotate-image-clockwise-or-anticlockwise-inside-a-div-using-javascript — Haim Evgi, Aug 02 '10 at 05:46

koko · Accepted Answer · 2010-08-02T08:34:47.093

4

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!

edited Aug 02 '10 at 08:34

answered Aug 02 '10 at 07:26

koko

958
12
26

this looks great. I will give this a try tomorrow and see how it goes. – spinon Aug 02 '10 at 08:54
+1 for cross browser support and `filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);` – Travis J Apr 06 '12 at 20:27

score 1 · Answer 2 · edited Nov 11 '11 at 11:01

Very interesting javascript solution: http://www.stableflow.com/downloads/jquery-plugins/360-degrees-product-view/ Imagine that you are running some shop or blog and you present user with your products. The solution allows you to save space and present products view in very realistic form by means of the script. It allows to forget about flash (which is still not supported by all mobile devices). What you need to utilize it is:

Download free plugin (use link above)
Setup the plugin using instructions
Create and add a series of images for each product (the more images the better rotation effect you will get)
Follow raised interest to your products from users

It really worked for me. Tested on Android mobile(lg p500), iPad and iPod touch as well.

score 0 · Answer 3 · answered Aug 02 '10 at 05:52

0

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.

answered Aug 02 '10 at 05:52

Traveling Tech Guy

27,194
23
111
159

thanks for the answer but I am really looking to avoid using canvas if possible. Not entirely sure it can be but that is what I am trying to figure out. I have tried searching all over Google and SO and haven't found anything yet for this. So thought I would try asking a question to see if anyone has come across this before. – spinon Aug 02 '10 at 05:55

How to rotate an image using client side solution

3 Answers3