如何在 Divi 中创建在 3D 空间中碰撞的浮动模块

探索使用 Divi 可能实现的新设计总是很有趣。 而今天，我们将使用 Divi 探索 3D 空间！ 从技术上讲，我们将探索如何设计看起来像是在 3D 空间中碰撞的浮动模块。 这种设计将作为一种创造性的方式工作，通过展示您的网站上有“广泛”的服务、产品或资源来吸引访问者。

显然，本教程不会与我想象的现实太空探索进行比较。 但是，希望您在那里的 Divi 探索者可以在此过程中学到一些东西。

抢先看

这是我们将共同构建的设计的先睹为快。

免费下载在 3D 空间布局中碰撞的浮动模块

要了解本教程中构建的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

订阅我们的 YouTube 频道

预制布局入门

首先，请确保您已安装并激活 Divi 主题。 然后创建一个新页面，给页面一个标题，然后部署 Divi Builder（在前端）。 选择“选择预制布局”选项。 然后选择 Video Game Landing Page 布局并将其导入新页面。

为了在我们的设计中抢先一步，我们将使用标题为“游戏功能”的部分，其中包含我们将用于我们的设计的简介。 由于这是我们真正需要的唯一部分，请继续删除除两行简介之外的所有部分和行。

在 Divi 中实现 3D 空间设计中的浮动模糊

创建第一行模糊

在包含两行简介的预制布局部分内，创建一个新的一列行并将其拖动到该部分的顶部。

现在使用 Divi 的多选功能（在选择每个简介时按住 ctrl/cmd），选择下面两列中的 5 个简介，并将它们拖到该部分顶部的新一列行中。

现在您可以删除下面预制布局附带的两行。 之后，您应该只有一个包含 5 个简介的单列行。

为我们的部分添加视角

为了获得我们在这个设计中寻找的 3D 效果，我们需要将透视 css 属性添加到我们的部分。 每当我们使用变换选项旋转行时，这都会将 3D 透视添加到我们的行中。

打开部分设置并将以下自定义 CSS 添加到主元素：

perspective: 1000px;

稍后，您可能希望增加或减少透视值以使 3D 元素（在本例中为行）在观看屏幕时离用户的视角更近或更远。

有关更多信息，请查看透视如何与 Divi 中的变换选项配合使用。

自定义行

在我们开始设计我们的简介之前，让我们首先配置我们的行设置。 对于此设计，我们需要在行级别更改三项主要内容：

1. 我们需要使用“display:flex”水平对齐我们的简介。 这将使我们的设计在所有设备上保持一致和响应（而不是使用会在平板电脑和手机上中断的 5 列布局）。
2. 我们需要通过将装订线宽度设置为 1 来摆脱默认的列边距。
3. 我们需要使用变换旋转将行在 X 轴上旋转 45 度。 将透视属性添加到父级（部分）后，行及其所有元素都具有我们正在寻找的 3D 效果。

打开行设置并更新以下内容：

天沟宽度：1
宽度：80%（桌面）、100%（平板电脑）、100%（手机）
Transform 旋转 X 轴：45deg

列主要元素 CSS：

display: flex;
justify-content: center;

调整模糊样式和间距

现在是时候稍微调整一下我们的简介的内容和样式了。

由于我们希望对所有的宣传语应用相同的自定义，再次使用多选来选择所有的宣传语并部署元素设置模式。

首先，删除正文内容。

然后添加背景颜色：

背景颜色：rgba(20,241,217,0.16)

然后更新以下间距：

自定义边距（桌面）：2vw 右
自定义保证金（平板电脑和手机）：0vw 正确

自定义填充：顶部 2%，底部 2%，左侧 3%，右侧 3%

接下来，添加边框如下：

边框宽度：2px
边框颜色：rgba(20,241,217,0.66)

在这一点上，所有的宣传语都具有适当的样式。 我们仍然需要使用变换选项来单独更改每个导语的比例和位置，这将增加导语的 3D 浮动效果。 但在我们这样做之前，让我们复制该行以创建我们的第二行简介。

创建第二行简介

要创建第二行宣传语，只需复制您刚刚自定义的 5 行宣传语即可。

为了创建碰撞效果，我们可以在相反的方向 (-45deg) 旋转复制的行。

打开重复的行并更新以下内容：

Transform 旋转 X 轴：-45deg

增加顶部和底部填充

在这一点上，前面的宣传语可能会延伸到该部分之外。 要解决此问题，请将以下填充添加到您的部分：

自定义填充：顶部 15%，底部 15%

使用变换选项单独调整每个模糊的大小和位置

在这一点上，您已设置好您希望每个广告如何“漂浮”在 3D 空间中的创意。 为此，您可以使用变换选项将每个模糊的大小和位置一一准确定位到您想要的位置。 通过这样做，您的简介将在 3D 空间中具有不同的深度。

为方便起见，我将从 1 到 10 的宣传片编号，从顶行最左侧的宣传片（宣传片 #1）开始，到第二行中最右侧的宣传片（宣传片 #10）结束。

模糊 #1

让我们从顶行的第一个简介开始。 打开模糊设置并更新以下内容：

变换比例（x 和 y 轴）：90%

模糊 #2

打开 Blurb #2 的设置并更新以下内容：

变换比例（x 和 y 轴）：80%
变换 平移 X 轴：-10%

模糊 #3

变换比例（x 和 y 轴）：80%
变换 X 轴平移：20%

模糊 #4

变换比例（x 和 y 轴）：85%
变换 平移 X 轴：-30%

模糊 #5

变换比例（x 和 y 轴）：60%

完成后，您的第一行应如下所示。

继续为导语 6-10 自定义变换选项，从第二行最左侧的导语 #6 开始。

模糊 #6

变换比例（x 和 y 轴）：60%
变换 平移 X 轴：-40%
变换 平移 Y 轴：-20%

模糊 #7

变换比例（x 和 y 轴）：90%
变换 X 轴平移：20%

模糊 #8

变换比例（x 和 y 轴）：70%
变换 平移 X 轴：-50%

模糊 #9

变换比例（x 和 y 轴）：80%
变换 平移 X 轴：-20%

模糊 #10

变换比例（x 和 y 轴）：70%
变换 平移 X 轴：-60%

现在让我们看看第二行与 3D 空间中的第一行发生碰撞时的外观。

为了完成设计，我们可以为该部分添加一个漂亮的 3D 空间背景图像。 我正在使用我们在本教程中使用的视频游戏登陆页面布局附带的顶部背景图像。

最终设计

现在让我们看看我们的 3D 浮动模块的最终设计。

桌面

药片

电话

由于 5 个宣传语横跨行延伸，因此要适应所有 5 个宣传语而不将其延伸到视口之外是一个更大的挑战。 要解决此问题，您可以简单地在手机上的每一行中隐藏远距离信息。 或者，您可以在手机上为每个宣传语设置更小的尺寸。

最后的想法

我希望本教程能给你一些关于如何在 3D 空间中创建自己的浮动模块的灵感。 真正需要的只是几个步骤，使用透视和变换选项在 3D 中旋转整行模块。 之后，您可以放置​​每个模块以将它们浮动到任何您想要的位置。

玩得开心探索。

我期待在评论中收到您的来信。

干杯!