Rotating Images from Right to Left with CSS

Is it possible to rotate images from right to left in a DIV with pure C开发者_C百科SS i mean without using any JavaScript?

That is possible using CSS3's transform: rotate(...) or some proprietary IE filters. See an example or the specification.

e.g.

position:absolute;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg); /*opera*/
transform: rotate(90deg); /*likely future standard*/
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/*for filter: 1==90deg, 2==180deg, 3==270deg*/

Note that this transform is a rendering transform; so the rotation won't affect layout (similar to position: relative content). That's why absolute positioning is often the easiest route to use here. Also, be aware that the spec isn't final; details may change (in particular, how transforms interact with layout - another reason to stick with position:absolute;).

Finally, you may be interested in animated transitions; as a randomly googled example you could look here. These are also not yet finalized, though implemented partially in firefox, webkit and opera: a sign the standard will probably stick. Non-stop animations are an Apple proposal which so far is implemented in webkit only and are quite a bit more complex than transitions; I'd stay away from these except for tech demos since the standard may well change in potentially complex ways.

The question is unclear as to whether he's looking for a static rotation - ie the shown on screen at a fixed angle - or an animated rotation; eg where the element spins on screen.

For a static rotation, @Eamon Nerbonne's answer is absolutely spot on. The transform and filter styles are what you want. (however note that the syntax for filter is invalid CSS, and in my tests can cause some non-IE browsers to ignore any styles after it, so you may want to be careful of that)

If you're looking for an animated rotation, it's much harder. There is support for animation in the CSS spec, using the transition and transform styles, but it is very very poorly supported at the moment. Safari and Chrome should be able to do it, but you'll struggle with anything else.

Here's a link to get you started: http://webkit.org/blog/138/css-animation/