Turning an image in HTML, Javascript

Is it possible to turn an image? (cross browser, and no plugins)

For example a rolling ball, in Flash it is easy, there mus开发者_StackOverflow中文版t be a good alternative since HTML5 is coming etc.

By "turn" do you mean rotate? If so, the best I've seen so far, cross-browser, is using Raphael. It uses VML on IE and SVG on other browsers. See the image rotate demo: http://raphaeljs.com/image-rotation.html

It's possible: http://mrdoob.com/projects/chromeexperiments/ball_pool/

Though I haven't done it and from the looks of it, doesn't seem simple (And in the case above, does use the html5 canvas which still lacks some compatibility in older browsers, depending on what you want to do though, may not be an issue)

You could do some more hacky kind of tricks like rotating with php+imagemagick or one image with many rotations and only show one rotation at a time (using css to show only a section of the image as a background)

Or stick with flash :/

You can use CSS3 to rotate images (and other elements). The problem is that older browsers will apply no rotation and that (for now) you have to use several vendor specific prefixes to get rotation in the most common browsers (excluding IE, of course - but support will come in IE9).

Example code:

-moz-transform: rotate(-20deg); // Firefox
-o-transform: rotate(-20deg); // Opera
-webkit-transform: rotate(-20deg); // Chrome, Safari, etc
transform: rotate(-20deg); // CSS3 standard, to keep it future proof

Make sure to write the standard one at the end to ensure this on is interpreted instead of a vendor specific one.

Note that this will invalidate your stylesheet.

If you combine this with a javascript animation framework (like Scriptaculous) you can animate these properties to create the effect of a rolling ball or something.