How do I rotate an image in Javascript or CSS

Question

I am creating a simple game.

I want to use jQUERY to rotate the joints making it move. I am using .animate ( http://api.jquery.com/animate/ ) to animate CSS properties but if it is also possible to use Javscript, I can make my own custom code.

More TO-THE-POINT

How do I rotate images in CSS or Javascript? I prefer CSS but Javascript is fine too.

If it is impossible (which I am pretty sure it is but I am not giving up yet) is there any other possible way to do what i am trying to do without making a bunch of seperate images, each rotated a different way. Or can anyone at least give me an example of a site that does something similar.

EDIT: I need 1 CSS property (no -something: rotation(500deg);) that works with FireFox, Safari and Chrome because those are the only browsers I really work with.

Answer 1

Some browsers support this:

• Rotate That Image with CSS

Answer 2

Firefox and the Webkit browsers support a "transform" CSS property ("-webkit-transform", "-moz-transform"). Those can do all sorts of interesting things. There's a very weak IE tool that allows very limited rotation, so it's not really an option for something like a game.

Here's a demo page I made for another Stackoverflow question a few days ago: http://gutfullofbeer.net/compass.html

Answer 3

Not a full answer, but in case it's helpful here's a fun little bookmarklet I have in Safari (works in chrome as well) that will cause the page contents to rotate:

javascript:(function(){var%20d=0;setInterval(function(){document.body.style['-webkit-transform']='rotate('+%20d%20+'deg)';d+=1},10)}());

I figured it might be helpful to see an example usage.

Answer 4

Have you ever tried: http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html ??

Works great in all modern browsers including IE>=6

Answer 5

Not ideal, but you could make separate image files for each rotated state of the image, then use JavaScript to change <img src="XXX" /> or CSS to change background-image: url('XXX'); Once the images have loaded (you could even pre-load them with JS), the animation between them should be very fast.