您想添加倾斜效果吗 Divi 在您页面的任何元素上？
将悬停倾斜效果添加到您的 网站Web 是一种有趣且引人入胜的方式，可以让您的 网站Web Divi. 通常这种类型的设计需要插件或更高级的代码。 但是，使用 Tilt.js（jQuery 的轻微悬停倾斜效果），这个过程要容易得多。 使用 Tilt.js，您可以在几分钟内轻松地将悬停倾斜效果应用于任何东西。
在本教程中，我们将向您展示如何向任何元素添加悬停倾斜效果 Divi。 结合使用 jQuerytilt.js 片段和 Divi 构建器，我们将向您展示如何向图像、模块列、行等添加出色的悬停倾斜效果。
我们甚至会向您展示如何添加惊人的 3D 视差效果。
让我们开始吧！
概观
这是我们将在本教程中获得的结果的快速概述。
也可以看看： Divi：如何在将鼠标悬停在部分分隔符上时显示内容
你需要什么才能开始
从 WordPress 仪表板，转到 页面>添加新 创建一个新页面。
给它一个对你有意义的标题，然后点击 使用 Divi Builder
然后点击 开始建设 (从头开始)
之后，您将有一块空白画布可以开始在Divi中进行设计。
在 Divi 中的任何元素悬停时添加倾斜效果
为 Divi 模块添加倾斜悬停效果
让我们首先向默认常规部分添加一个三列行。
添加图像模块
在第一列中，添加一个 Image 模块。
注意：您可以使用您选择的任何模块。 它根本不必是 Image 模块。
上传您选择的图像。
添加一个图像模块类
在标签下 高级，添加以下 CSS 类：
- CSS 类：et-js-tilt
这个类稍后将用作我们倾斜功能的选择器。
复制和粘贴上一个图像模块
接下来，复制图像模块并将一个粘贴到剩余的两列中的每一列中。
如果您愿意，可以用新的图像替换重复的图像。 只需确保每个图像模块都属于 CSS 类 “et-js-倾斜”.
添加 JQuery 库“tilt.js”
添加库 倾斜.js 以及扭曲图像所需的代码片段，我们将使用代码模块。
首先，在现有行下方添加一列新行。
然后将代码模块添加到新行。
然后我们需要访问 倾斜.js 库 通过添加一个从他们的 CDN 导入tilt.js 的脚本（https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js）。 将以下脚本粘贴到代码框中。
在脚本标签中使用以下 src 代码来导入库：
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"它应该如下所示：
导入很重要 倾斜.js 在添加将使用它的代码之前。 所以在脚本指向之后 倾斜.js，添加必要的脚本标签来包装我们需要添加的JQuery。 然后在脚本标签之间粘贴以下 JQuery。
jQuery(document).ready(function ($) {
if ($(window).width() > 980) {
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1,
perspective: 300,
});
}
});
请注意，tilt() 函数位于 if 语句中，该语句将在浏览器宽度大于 980 像素时运行。 这将确保效果只发生在台式计算机上。
Voici lerésultat。
为线条添加了倾斜悬停效果
正如我们之前提到的，您可以将此悬停倾斜效果添加到任何 Divi 元素。 这包括整行。
此外，您可以为一行添加倾斜效果，同时保持该行中每个模块的倾斜效果。
就是这样
复制行并将唯一的 CSS 类添加到行
复制现有的图像行，然后打开复制行设置。 在选项卡下 高级，给该行一个唯一的 CSS 类，如下所示：
- CSS 类：et-row-js-tilt
添加 jQuery
然后在前面的 skew 函数下方添加以下 jQuery 以将单独的 skew 函数应用于该行。
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});请注意，对于这种倾斜效果，我们将比例减小到 1 并增加了透视值，以使倾斜更加微妙。
Voici lerésultat。
请注意，当您将鼠标悬停在该行上时，该行的倾斜功能会激活，并且每个图像模块也具有我们之前添加的相同倾斜效果。 这就是您可以应用嵌套倾斜效果实例的方式。
将倾斜悬停效果添加到具有多个 Divi 模块的列
在某些情况下，为一列模块添加倾斜效果很有用。 这将允许您使用 Divi 在一个列中设计多个模块，然后将所有这些元素倾斜为一个单元。
为了给您提供一个如何做到这一点的示例，我们将在包含图像模块、文本模块和按钮模块的列中添加悬停时倾斜效果。
添加新行
首先，创建一个具有以下列结构的新行：
添加图像模块
在第 2 列（中间列）内，添加一个新的图像模块。
将图像上传到模块。
将图像的对齐方式设置为中心。
添加文本模块
在 Image 模块下方，添加一个带有以下 H2 标头的 Text 模块：
<h2>Local Organic</h2>
接下来，更新 H2 标题样式，如下所示：
- 字体：伯克希尔花体
- 文本对齐方式：居中
- 文字颜色：#000000
- 尺寸：60 像素
- 线高：1,2 em
添加按钮模块
在 Text 模块下方，添加一个 Button 模块。
将按钮文本更新为“了解更多...”
更新个性化设置如下：
- 按钮对齐方式：居中
- 为按钮使用自定义样式
- 按钮文字大小：18px
- 文字颜色：#fff
- 按钮背景：#000
- 按钮边框宽度：0 像素
- 边框半径：100px
- 按钮字体：流沙
- 字体粗细：粗体
- 内边距（顶部和底部）：16px
- 内边距（左右）：30px
- 盒子阴影：见截图
列参数
完成所有三个模块后，打开这些模块的父列（第 2 列）的设置并更新以下内容：
- 背景：#f5cee6
- 内边距（顶部和底部）：50px
- 内边距（左右）：20px
将 CSS 类添加到列
在高级选项卡下，添加以下 CSS 类：
- CSS 类：et-column-js-tilt
添加了 jQuery 以将倾斜效果应用于列
要将倾斜效果添加到列，我们可以添加另一个类似的 jQuery 代码段，该代码段针对 CSS Class 列。
将以下代码段粘贴到前面针对该行的代码段下方。
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
这是最终结果。
为内部添加了 3D 视差效果
对于更高级的悬停倾斜效果，我们可以在内部列模块中添加 3D 视差效果。
结合使用 perspective 和 transform:translateZ() ，当倾斜悬停效果激活时，我们可以使每个列的模块出现在 3D 空间中。
就是这样
重复上一行
首先，复制上一行，并将倾斜效果添加到中间列。
添加单列类
然后使用唯一的 CSS 类更新中间列（第 2 列），如下所示：
- CSS 类：et-column-js-tilt-3d
自定义CSS
为确保内部模块保留 3D 效果，请将以下自定义 CSS 添加到主列元素：
transform-style: preserve-3d;
添加 jQuery 和 CSS
接下来，在前面针对该列的 skew 函数片段下方添加更多 jQuery 片段，如下所示：
const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
scale: 1.1,
perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
$(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
$(e.target).removeClass("tilt-active");
});这个 jQuery 向列添加了另一个基本的倾斜函数，就像前面的示例一样。
.et-column-js-tilt-3d.tilt-active .et_pb_image {
transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
transform: translateZ(50px);
}
现在看看最终结果。 注意三个模块在倾斜效果期间旋转时如何出现在 3D 空间中。
最终结果
这是我们示例的最终结果的另一种看法。
立即下载DIVI！！！
结论
提供的悬停倾斜效果 倾斜.js 尝试起来真的很有趣。
尽管我们在本教程中使用了一些基本示例，但您可以通过将这些悬停倾斜效果应用到我们的预制布局之一或您自己的站点来轻松度过一天。
我们希望本教程能激发您的下一个 Divi 项目。 如果您有任何疑虑或建议，请联系我们 评论部分 讨论一下。
您也可以咨询 我们的资源，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
但与此同时， 在您不同的社交网络上分享此文章.
...
