[CSS] 動畫效果－旋轉、傾斜、縮放、位移

運用 CSS level 3 (CSS 3) 的 transform 及 transition 的特性實作。

(1) transform：讓 box 旋轉、傾斜、縮放、移動。
(2) transition：設定補間動畫效果。

補充：transform 特性 (css properties) ，直接就可以旋轉、歪斜、放大、縮小、移動元素 (elements) 的 box ，甚至 3D 的迴旋、透視。包括整個元素所有的內容也都隨之變形，不再侷限只能在僵硬的矩形框，對網頁排版及設計上會有很大的彈性和突破，而且對網頁正常的編排不會有相互排擠問題，一格黏接一格耗時費工的殘腦時代終將走入歷史。

---

Source

☞ CSS transform 能旋轉、傾斜、縮放變形 box
☞ [CSS3]用 CSS3 做效果 - 影像縮放位移突顯效果
☞ 10 Easy Image Hover Effects You Can Copy and Paste
☞ 小tip：使用CSS將圖片轉換成黑白（灰色，置灰）