How to rotate an object clockwise?

How to rotate an object clockwise (without canvas, css3 etc)?

Please see my example cod开发者_如何转开发e

Just help to correct my formula.

You can't do it without CSS, but your example code is using CSS for the translation: you're modifying CSS properties by using JavaScript to modify the div's style property.

Try something like:

div.style['-webkit-transform'] = 'rotate(' + angle + 'deg)';

To set the angle, assuming you are working with a Webkit browser.

There are two ways in which you can rotate your object, both have their own draw backs.

1) You can use php to send back a rotated version of your image. This is fairly easy to do using the GD library.

A positive of this is ofcourse, is that if you use a name like, rotate.php?image=my_image_name&angle=30 then the browser will cache the image for you.

However, there will be a delay with this and so is not a good solution for games.

2) You create the rotations and attached them all to one large sprite sheet. You can then just switch between the sprite image.

However, this does mean you will have a large image file and usually wont have perfect rotation. You can reduce this by rotating in fixed amounts such as 5 degrees, but even with that you will have 72 different versions of your image.

Both of these methods only work with image files them selves and not divs. You can use the images as a background the divs ofcourse.