Rotating An Image

I'd like to rotate an image on a webpage through four orientations at 90 degrees apart. I'd prefer this to happen on the client machines. Can this be done using css? Or will I need

Solution 1:

@tada; you can use css3 rotate property as petah said

div{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}

& for IE you can use IE filter:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

for more check these links:

http://snook.ca/archives/html_and_css/css-text-rotation

http://css-tricks.com/snippets/css/text-rotation/

Solution 2:

CSS3 works, but my concern would be legacy compatibility. According to this matrix, it's not going to work on IE pre version 9.

ImageMagick is an obvious solution, but that's server side so it really doesn't solve your challenge.

I think I'd lean toward Jquery Rotate, which is a very well-done plugin that certainly maintains a simplicity advantage on the presentation layer over a pure CSS solution. On the basis of compatibility, it's quite a way ahead of pure CSS3 right now. <sarcasm>Thanks, Microsoft.</sarcasm>

Solution 3:

You can using CSS3

Check out http://davidwalsh.name/css-transform-rotate

-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
-ms-transform:rotate(120deg);
transform:rotate(120deg);