Question

Is it possible to rotate images from right to left in a DIV with pure CSS i mean without using any JavaScript?

Answer 1

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.