7

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?

Thank you for your time.

DanDan
  • 10,462
  • 8
  • 53
  • 69
  • since it is 2013 now, check this [answer](http://stackoverflow.com/a/11832483/926460), it just works – Timeless Apr 26 '13 at 04:14

3 Answers3

7

It is possible however only for new browsers.

Best Link I could find (Chrome / Safari / Firefox) with example

Sample source code (Safari/Chrome)

Sample source code (Firefox)

SO post containing code for IE Webkit and Firefox

Community
  • 1
  • 1
jantimon
  • 36,840
  • 23
  • 122
  • 185
  • Thank you for the links. Some interesting effects here! At the moment though, it looks like I will have use javascript until browsers catch up. – DanDan Oct 06 '09 at 16:00
5

You can do it in Firefox using these CSS transforms - as for other browsers, I think you'll need Javascript. I'd recommend you perhaps take a look at the Raphael library.

Mark Bell
  • 28,985
  • 26
  • 118
  • 145
  • This looks like an excellent library and will save me a lot of work. Thank you for the link. – DanDan Oct 06 '09 at 16:01
1

Afraid you're gonna have to use some javascript for that - CSS cannot do this currently

Try checking this out:

http://code.google.com/p/jquery-rotate/

Paul
  • 5,514
  • 2
  • 29
  • 38