How do I rotate an image in Javascript or CSS

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.

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

As shown in the image above 1) is -90 degree or 270 degree rotation 2) is +90 degree rotation and 3) is 180 degree rotation.

Note :- The quadrant containing blue square is the original image position in web browser when displayed with img tag. This is the only visible section to developer in web browser. On rotation of image from its top left point it will switch to the invisible quadrant. Hence it is very very important to use translateX and translateY property along with rotate property in css to drag the image from invisible quadrant to visible quadrant to display it on web browser. Please refer to css transform property for more info.

The css for the same is as below

.image_rotate_270 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(270deg) translateX(-100%);
    -webkit-transform: rotate(270deg) translateX(-100%);
    -ms-transform: rotate(270deg)  translateX(-100%);
}


.image_rotate_90 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg)  translateY(-100%);
}


.image_rotate_180 {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */

    transform: rotate(180deg) translateX(-100%) translateY(-100%);
    -webkit-transform: rotate(180deg) translateX(-100%) translateY(-100%);
    -ms-transform: rotate(180deg)  translateX(-100%) translateY(-100%);
}

Now use this class names inside the class property of img tag.

<img src="xyz.jpg" id="image" class="image_rotate_90"/>

For rotation of -90 and +90 you will sometimes need to alter its height and width either with screen resolution or with original image resolution so that image will retain its original shape. Do it using javascript inside the body tag after image is loaded.

<script>
    document.getElementById("image").width = screen.height;
    document.getElementById("image").height = screen.width;
</script>

Suppose your original image is of 640 X 480 resolution. i.e. width = 480 and height = 640. So when you rotate the image, it becomes a image with resolution 480 X 640. So to retain its original shape. You can do the following under body tag after image loaded .

<script>
    document.getElementById("image").width = 480px;
    document.getElementById("image").height = 640px;
</script>

Some browsers support this:

• Rotate That Image with CSS

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.

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.

Have you ever tried: http://jqueryrotate.com/ ??

Works great in all modern browsers including IE>=6