本文較短，将介紹巧用模糊實作視覺 3D 效果的技巧。
我們都知道，在正常的視覺效果中，離我們越近的通常我們會看的越清晰，而離我們較遠則相對沒那麼清晰~
我們可以利用清晰與模糊兩種狀态來建構視差效果。像是這樣：
而在 CSS 中，我們可以利用模糊濾鏡 <code>filter: blur()</code> 與 <code>transform-style: preserve-3d</code> 來實作它們。
首先，我們需要實作一個文字的 3D 變換，這個比較簡單。主要是借助 <code>transform-style: preserve-3d</code> 和 <code>perspective</code>，以及讓文字繞 Y 軸進行旋轉即可。
簡單的代碼如下：
我們就可以得到這樣一個 3D 文字效果：
這個效果已經有了初步的 3D 效果，但是僅僅是這樣，會覺得少了些什麼。接下來我們就需要補充一下模糊的效果，讓距離我們近的文字清晰，遠離我們的文字模糊。
但這樣就需要對每個文字進行精細化處理，上面的 HTML 結構無法做到對每一個文字的單獨處理，我們簡單改造一下結構：
完整的代碼大概是這樣：
簡單解析下，這裡有幾個小技巧，仔細觀察我們需要的效果：
第一個字元和最後一個字元在旋轉的最左效果和最右效果下分别會離我們最近和最遠，它們的效果其實應該是一緻的，是以第一個字元和最後一個字元應該統一處理，依次類推，第二個字元和倒數第二字元統一處理，這裡可以借助 SASS 利用 <code>:nth-child</code> 和 <code>:nth-last-child</code> 高效編寫 CSS 代碼
每次有一半是清晰的，一半的是模糊的，需要區分對待，利用 <code>animation-delay</code> 讓一半的動畫延遲一半進行
可以再配合 <code>text-shadow</code> 讓文字更立體點
這樣，我們可以最終得到如下效果：
完整的代碼，你可以戳這裡 -- CSS 靈感 -- 利用 filter:blur 增強文字的 3D 效果
合理運用模糊，是能在沒有 <code>transform-style: preserve-3d</code> 和 <code>perspective</code> 的加持下，也能建構出不錯的 3D 效果。
之前在 Youtube 的一個視訊教學網站看到了下面這個落葉效果，就是利用模糊以及簡單的層級關系，讓整個畫面看上去非常的真實：
主要就是通過清晰與模糊兩種狀态的對比，速度的差異，來建構視差效果。
CodePen Demo -- Falling leaves
好了，本文到此結束，希望對你有幫助 😃
更多精彩 CSS 效果可以關注我的 CSS 靈感
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。