使用 TailwindCSS 的視差懸停效果

您是否曾被卡片上令人驚嘆的 3D 視差懸停效果所迷住？它們看起來很複雜，對吧？嗯，我也是這麼想的，直到我遇到一個簡單的 CodePen 演示，它展示了創建一個演示是多麼容易。你也想學嗎？讓我們深入了解-

一些基礎知識

為了達到 3D 效果，我們首先需要了解一些事情。那些是-

• 透視：透視屬性控制物件與檢視器的顯示距離。較低的值會產生更強、更戲劇性的 3D 效果，而較高的值會使效果更微妙。
• 變換：變換屬性可讓您將 2D 或 3D 變更套用至元素。您可以使用它來旋轉、縮放、移動、傾斜等等！

讓我們跳到程式碼

先檢查最終結果，這樣你就會明白我們正在嘗試建立什麼。將滑鼠懸停在卡片上，看看它是什麼樣子？

現在，讓我們看看它是如何運作的。我不會在這裡解釋每個 TailwindCSS 類別。我們將只討論產生效果的主要類別。首先，讓我們來看看主卡的div的類別-

<div>



<p>Look at this part here-<br>
</p>

<pre class="brush:php;toolbar:false">[transform:perspective(800px)_rotateY(10deg)] hover:[transform:perspective(800px)_rotateY(-10deg)]

我們在這裡做兩件事。首先，我們將卡片沿著 Y 軸旋轉 10 度。並且，也將視角設定為 800px。結果，卡片的正常狀態如下圖所示。它稍微向右旋轉。而且，由於我們應用了一些視角，您可以看到卡片的右側有點傾斜。這就是真正的 3D 世界的運作方式！

我們可以調整視角來查看卡片的變化。而且，您還將了解視角是如何運作的 -

這就是我們將視角改為 100px 時的樣子。我們降低視角值越多，內容就越接近 - 還記得嗎？

並且，這就是我們將視角設定為 10000px 時所得到的結果。到目前為止，好像根本沒有旋轉！

現在，我們將看到當我們將其懸停時它如何產生 3D 幻覺。而且，你會驚訝地發現，欺騙我們的眼睛是如此容易！

參考img的這部分程式碼-

<img  alt="使用 TailwindCSS 的視差懸停效果" >



<p>將滑鼠停留在卡片上時，影像向左滑動 2.5rem，產生動態效果。為此，我們使用 TailwindCSS 的 Group 修飾符。而且，就是這樣！我們將有一張3D影像旋轉卡。 </p>

<p>現在輪到你了！嘗試這些類，調整視角，或將此效果與其他 TailwindCSS 實用程式結合以創建獨特的東西。不要忘記在評論或社交媒體上分享您的創作！ </p>

<p>你也可以在這裡找到我- </p>

• X
• 領英