今天同事問如何在 client-side 轉動圖片的方法，
我直覺回答用 html, css, javascript 不可能。
但事後想想，現在科技日新月異，
我的回答憑藉的是很久以前的網頁知識，
如今可能有辦法做到也不一定。
所以我上網搜尋了一下，
找到這一篇：JavaScript: Rotate Images，
看過程式碼後發現，
其原理是將圖片上的每一個 pixel 以 CSS 方式取出，
然後一個個 pixel 貼在畫面上。
這實在是太費時啦！而且轉出來的圖片不是很好看......＝口＝
當時想，這已經證實自己用 html, css, javascript 不可能做到旋轉圖片的理論，
但不知為何還是繼續找資料，
結果找到 W3C 的 CSS 2D Transforms Module 規範，
似乎可以達到此目的：
| div { height: 100px; width: 100px; transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg); } |
但最大的問題是所使用的瀏覽器沒支援，
查到一篇網誌有很棒的瀏覽器支援表（來源，修改過）：
| IE8 - *1 | chrome & safair | firefox 3.5.5 *2 | opera 10.10 - *3 | |
|---|---|---|---|---|
| CSS Transiton | X | O | X | X |
| CSS Animation | X | O | X | X |
| 2D Transform | *4 | O | O | X |
| 3D Transform | X | *5 | X | X |
註１：有消息稱在 Internet Explorer 9 中將更好的支持 HTML5 和 CSS3。
註２：firefox3.7 同 IE9 一樣稱將支持更多 CSS3 特性，不過最終是否支持 Animation 和 3D Transform 還不是很確定。
註３：oprea 已經在表示在 Presto2.3(opera 內核)中將支持 Transtion。可查看 wiki。
註４：IE 可以通過濾鏡來實現部分變形。
註５：Windows 下的 chrome 和 safair 支持部分 3D Transform。mac 和 iphone 下的 safair 支持全部 3D Transform (未驗證)。
繼續找，找到新的 HTML tag <canvas>，
本來很擔心和 CSS3 一樣沒支援，
但經測試後發現 IE7, FF3, safari 都可以！喔耶！
Implement or testing 的方法可以看這篇。
科技果然是日新月異，要不斷追趕、努力跟上啊～～XD
- JavaScript: Rotate Images
- CSS 2D Transforms Module Level 3
- Canvas tutorial - MDC
- Image Effects : Image Rotate with CANVAS / The JavaScript Source
- 文章 - 使用 CSS3 創建動畫效果 │ 睡蓮‧池水間 - waterlily-lsl.com
- Javascript, rotate image on angle - JavaScript - Web development
- How to rotate the image - JavaScript / Ajax / DHTML answers
- Raphaël—JavaScript Library
這裡提供的程式碼也很讚。 - Animation Using CSS Transforms < CSS | The Art of Web
- Canvas element - Wikipedia, the free encyclopedia
