0

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.

Nimantha
  • 6,405
  • 6
  • 28
  • 69
tetris
  • 4,302
  • 6
  • 28
  • 41

3 Answers3

1

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>

bpeterson76
  • 12,918
  • 5
  • 49
  • 82
  • You can rotate elements pre IE9 using ActiveX filters, it's just a pain... http://stackoverflow.com/q/6184589/353278 – Jeff Jun 09 '11 at 04:52
  • @jeff, purely my opinion, but any solution that needs a custom workaround for a specific browser isn't the best path to go down. Then again, neither is using a 10 year old version of a really poorly thought out browser.... – bpeterson76 Jun 09 '11 at 05:00
  • it would be nice if IE played along, but until then IE will always require custom 'workarounds'. I wouldn't even call this a workaround though. -moz-transform only works with moz, filter only works with IE. they're both vendor specific. – Jeff Jun 09 '11 at 05:15
  • not sure about that.....I haven't written an IE hack into a site for at least 2 years. If you're interested in finding them, there are ways to cope without having to circumvent the system. – bpeterson76 Jun 09 '11 at 06:11
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/

sandeep
  • 91,313
  • 23
  • 137
  • 155
0

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);
Petah
  • 45,477
  • 28
  • 157
  • 213