CODEWITHSUNDEEP
javascriptjquerycss
tetris
tetris

Reputation: 4362

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 to use JavaScript, I need to rotate a background image, a pattern which is repeated on the page.

Upvotes: 0

Views: 696

Answers (3)

sandeep
sandeep

Reputation: 92803

@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/

Upvotes: 1

bpeterson76
bpeterson76

Reputation: 12870

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>

Upvotes: 1

Petah
Petah

Reputation: 46040

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);

Upvotes: 0

Related Questions