itouCards

專案介紹

itouCards 是把實體名片的正反面放到網頁上展示的小作品，使用 HTML、CSS 與原生 JavaScript 製作，支援在個人名片和 SCAICT 名片之間切換。

名片互動

• 點擊翻面：查看正面與背面的內容，也可使用 Enter 或空白鍵操作。
• 視角與反光：游標移動時，名片會隨位置傾斜，表面光澤也跟著改變。
• 閒置旋轉：沒有操作時切換到旋轉展示，游標回到畫面再轉為傾斜互動。
• 縮放：桌機可使用滾輪，觸控裝置可用雙指調整大小。
• 鍵盤操作：方向鍵可調整角度，頁籤也支援左右鍵切換。

實作細節

名片的尺寸比例會依圖片取得，不必為每一組素材寫死版型。前後面先載入完成再呈現，載入失敗時顯示狀態；切換名片也會重設翻面與傾斜，避免沿用上一張的互動位置。

CSS 負責 3D 變形和視覺樣式，JavaScript 管理載入、動畫狀態與操作回饋。整個網站不需要建置工具，能直接用瀏覽器開啟或部署到靜態主機。