3D Banner animate - lustan3216/BlogArticle GitHub Wiki

曾使用過Slider Revolution Responsive WordPress Slider Plugin

經評估後發現，可以不使用這套件自己手刻實作這功能。由於沒閒時間，在此謹簡述我會如何實作

如何實作的想法

如果是我自己實作demo影片中的效果

使用到的CSS

主要是用以下4個屬性表達而成

  1. transform: matrix3d：對XYZ軸實現旋轉、縮放的效果。
  2. transform: translate3d：對 XYZ 軸方向移動。x、y可以當作是左右上下移動圖片。
  3. Transform-origin：這個是視角的原點。這個效果都是針對同個原點做運算，所以可以先當作以正中心．
  4. transition：是用來實現「轉場動畫」，可以直接當成所有CSS動畫變化過程中都是用這個屬性表達的。其實只要 transition:all 0.2s ease ;就樣就幾乎做完轉場的動畫了，代表每個點到每個點之間的動畫是0.2秒內”滑順”的完成。

名詞定義

  • 底板：「底板」就是把所有元素包起來的div。可以控制這個底板旋轉或放大，全部的元素也會跟著旋轉放大。
  • 主要方向：滑鼠假如在中心點的右邊，旋轉的就要向左旋轉。滑鼠在中心點的左邊就要像右旋轉。動畫移動的「主要方向」就是指滑鼠在哪邊底板，就要跟著反方向移動。

實作想法

動畫移動的「主要方向」是設定一個底版，他會針對滑鼠和Transform-origin這個點，來計算出兩點之間的距離。進而換算出實現在matrix3d上 此底版會以這個XY差距的數字。當滑鼠離中心點越遠，所以xy離中心點會越大，所以整個底板要旋轉的多一點，反之則旋轉少一點。。剩下的只要對每個元素分別使用 transform: translate3d對X,Y方向位移即可。 然後再對每個元素下 transition:all 0.2s ease ;，如此一來大致上就完成了。

剩下最難的部分是調教出底板最佳的「位移和旋轉」，這邊尚未想到解決辦法。