使用 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
• 领英