JS地下城ー死亡筆記本

成果畫面

作品連結｜程式碼

預計效果：

1. 3D動態切換顯示相片。

2. 輸入框輸入對應名字之後，消除該圖片。

1. 3D動態旋轉相簿功能

圖片位置的css樣式設定，可參考下圖各元素圖片設定相應的樣式：

主要樣式設定（z軸堆疊及絕對位置設定）

2. 動態旋轉

一、css樣式設定：

版面上一共五塊的div區塊，將會利用js更替css樣式。變更樣式時，共通的transition樣式可以依照下方程式碼表示：

> div{
   transition: all 0.2s ease-in-out
   //略
}

二、js動態更換樣式

筆者利用陣列控制方法，動態旋轉相簿。陣列控制需注意陣列內數字值不可超出現有圖片範圍，具體套用樣式的程式碼及旋轉控制邏輯圖解如下：

循環陣列控制

陣列取值套用樣式

3. 執行消除指令

每次輸入名字之後，假使輸入名字的對應圖片不在正中間，則需要將對應圖片轉至中間後，才能執行消除程序。運作原理可就下方圖片內說明解釋：

旋轉至對應圖片陣列運作原理

圖片消除後畫面

參考資料：

https://www.cssscript.com/flip-element-carousel/