如何使用透视和变换选项在 Divi 中设计 3D 照片墙

设计 3D 照片墙似乎只有使用 Photoshop 或 Sketch 等照片编辑器才能实现。 但事实并非如此！ 如今，您可以仅使用 CSS 在 Web 上构建大量看似不可能的设计。 使用像 Divi 这样的页面构建器，您甚至不需要对 CSS 了解太多就可以创建此类设计。 这就是为什么今天，我将向您展示如何在Divi中设计3D照片墙。

诀窍是使用透视 css 属性。 只需将一行 CSS 添加到父元素，您就可以使用 Divi 的内置转换选项将项目旋转​​为栩栩如生的 3D 设计。

让我们开始吧！

抢先看

这是我们今天将设计的 3D 照片墙的先睹为快。

免费下载 3D 照片墙设计实例布局

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

下载文件

免费下载

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

下载

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

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

让我们进入教程好吗？

订阅我们的 YouTube 频道

入门

要开始使用本教程，您只需要安装并激活 Divi 主题。 您将需要使用一些图像，因此请随意使用我在 Travel Agency Layout Pack 中使用的相同图像。 之后，您将需要创建一个新页面，给出页面和标题，并部署 Divi Builder 以在前端构建。 然后选择“从头开始构建”选项。 就是这样。 您的设计画布等待着您！

了解透视如何与变换选项配合使用

如果你上过基本的艺术课，你可能对透视很熟悉。 这是艺术家用来绘制看似 3D 的对象的技术，即使它存在于 2D 纸或画布上。 在网页设计中，您可以使用 transform 属性将元素定位在 3D 位置。 在 Divi 中，这些转换选项内置于 Divi 构建器中。 将元素置于 3D 位置的主要变换属性是变换旋转，它允许您沿 z、x 或 y 轴旋转项目。 但是，如果您使用变换旋转来旋转项目，则除非应用了透视属性，否则该元素不会显示为 3D。

例如，假设您有一个图像模块，其中一个图像添加到一列行。

然后使用变换旋转属性沿 x 轴旋转图像。 图像将旋转但保持 2D，因此图像看起来就像从顶部和底部挤压变短。

现在，如果您使用一小段 CSS 向 Row 的主元素（它是图像的父元素）添加透视图，那么您将向图像添加透视图。 根据透视值，您可以增加或减少对象与观看屏幕的用户之间的距离。 这是一个示例，说明如果您将“透视：600 像素”添加到行中，图像将是什么样子。

您可以看到图像的顶部较小，图像底部较大，从而创建了透视 3D 效果。 基本上，图像看起来与查看页面的用户相差 900 像素。

在本教程中，我将使用相同的技术来旋转整行图像，然后向父部分添加透视以创建 3D 照片墙。

设计顶部和底部 3D 照片墙

在第一个设计中，我们将在可用作标题的单个文本的顶部和底部添加一个 3D 照片墙。 这是如何做到的。

创建顶级 3D 照片墙

要在新页面上开始工作，请创建一个四列行的常规部分。

在第 1 列中，使用您的第一个图像添加图像模块。 我在这个例子中使用的所有图像都是 600 像素 x 800 像素。

将图像上传到图像模块后，按如下方式更新填充：

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

复制（或复制和粘贴）图像并将它们添加到四列中的每一列，这样在四列中的每一列中都有三个图像，就像这样。

这将作为顶墙（或天花板），我们将旋转它并添加透视图以创建 3D 墙设计。

自定义部分以添加透视和隐藏溢出

由于我们要旋转行模块（不是单个图像），我们需要将透视属性添加到行的父级，即节。 并且为了防止图像超出部分容器，我们必须将溢出隐藏添加到垂直和水平溢出。

为此，请打开部分设置并更新以下内容：

背景颜色：#000000
自定义填充：0px 顶部，0px 底部

要添加透视属性，请将以下自定义 CSS 添加到主元素：

主要元素 CSS：

perspective: 400px;

查看溢出属性如下：

水平溢出：隐藏
垂直溢出：隐藏

更新行设置：宽度和装订线宽度

现在是时候自定义行，为旋转的 3D 设计做好准备了。 为此，我们将通过更新装订线宽度来缩小宽度并消除图像之间的任何边距。

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

天沟宽度：1
宽度：300px（桌面、平板和手机）

更新行设置：变换旋转和原点

现在使用变换旋转选项来旋转行，如下所示：

变换旋转 Y 轴：-58deg

改变变换原点如下：

变换原点：底部中心（或 100% 50%）

更新行设置：自定义列宽

由于我们希望四列布局保留在平板电脑和手机显示器上，我们需要在这些断点处覆盖列宽的 css。 为此，我们需要为每一列添加一个 width css 属性。 在高级选项卡下，将以下自定义 CSS 片段添加到每列的主要元素，如下所示：

（注意：确保装订线宽度设置为 1 否则这将不起作用）

第 1 列主要元素：

width: 25% !important;

第 2 列主要元素：

width: 25% !important;

第 3 列主要元素：

width: 25% !important;

第 4 栏主要元素：

width: 25% !important;

就是这样。 我们的第一个 3d 照片墙已经创建。

创建标题部分

为了创建我们的设计标题，我们需要创建一个新的常规部分，在当前部分的正下方有一列行。

在添加模块之前，用黑色背景更新该部分：

背景颜色：#000000

然后像我们之前所做的那样，将相同的透视属性添加到该部分的主元素中，如下所示：

然后使用以下内容将文本模块添加到行中：

内容：摄影

文字字体：Titillium Web
文字字体样式：TT
文字文字颜色：#ffffff
文字文字大小：5vw
文字字母间距：6px
文本行高：1em
文字方向：居中

现在，我们可以向文本模块添加变换旋转。 在父（或部分）设置透视图后，一旦我们旋转文本，就会出现 3D 效果。

添加变换旋转值如下：

变换旋转 X 轴：-12deg
变换旋转 Y 轴：32deg

现在我们准备创建底部 3D 照片墙。

创建底部 3D 照片墙（或地板）

要创建底部 3D 照片墙，我们可以简单地复制并粘贴包含顶墙的顶部部分并将其直接粘贴到标题部分下方。

接下来，更新新部分的行设置，如下所示：

变换旋转 Y 轴：58deg

变换原点：顶部中心

最终设计

就是这样！ 让我们看看最终的设计。

该设计在移动设备上也将保持不变（除了一点点溢出）。

创建左右 3D 照片墙

对于下一个设计，我们将在标题的左侧和右侧而不是顶部和底部创建 3D 照片墙。 为了快速启动设计过程，我们将在第一个示例中使用一些预先构建的设计。

首先，复制包含底部图像墙的第一个设计示例的底部部分。 然后打开新部分的行设置并将变换选项重置回默认状态。

接下来复制该行。

接下来，复制包含第一个设计示例中标题的文本模块的行（而不是部分）。 然后将其粘贴在包含图像的两行之间。

这是与第一个设计类似的设置，除了我们所有的行都在一个部分内。 这对下一步很重要。

我们希望我们的两个图像墙位于页面的左侧和右侧，文本位于中心。 一个简单的方法是在我们的部分使用 display flex 。 这将在该部分中水平对齐我们的行。

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

（请注意，我们将透视值提高到 700 像素，以创建用户透视的更多“Z 空间”距离。）

主要元素 CSS：

perspective: 700px;
display:flex;

瞧！ 我们的墙已经就位，可以轮换了。

为更高的墙添加更多图像

为了使我们的 3D 照片墙更高一点，我们需要做的就是在包含图像的每一行中的四列中的每一列中添加另一个图像。 只要确保他们像其他人一样保留 3% 的填充。

改变两侧行的宽度

在我们旋转图像墙之前，首先我们需要将它们的宽度调整为 100%。 打开左侧图像墙的行设置并更新以下内容：

宽度：100%（桌面、平板电脑、手机）
最大宽度：100%

然后对右侧的行执行相同操作。

旋转侧行以获得 3D 效果

现在我们准备将我们的变换旋转添加到我们的每一行。 首先，打开左行的行设置并更新以下内容：

变换旋转 X 轴：90 度

接下来，打开右侧行的行设置并更新以下内容：

变换旋转 X 轴：-90deg

随着我们在部分级别的视角，我们的行将在文本模块的每一侧显示为 3D 照片墙。

最后结果

让我们看看最终的结果。

为了锦上添花，您可以添加带有 3D 图形元素的背景图像。 这是一个设计示例，背景图像取自 Cryptocurrency Layout Pack。

奖励悬停效果：在悬停时将这些墙壁摆动到视野中！

您可以轻松添加变换旋转悬停效果，允许用户通过在悬停时将其摆动到视图中来查看图像墙。 为此，请打开左行设置并更新以下内容：

变换原点：左中
变换旋转 X 轴（悬停）：0deg

然后在右侧的行设置中，更新以下内容：

变换原点：右中
变换旋转 X 轴（悬停）：0deg

现在看看结果。

奖励设计效果：使图像脱离空间

由于图像行旋转并带有透视图，因此您可以使用变换平移移动行内的图像。 很酷的一点是运动将沿着 3D 平面。 为此，只需打开图像的设置并使用变换平移选项将网格外的图像移动到空间中！

下面是通过向图像添加一些变换转换值的示例。

最后的想法

在 Divi 中创建 3D 照片墙确实对页面设计产生了令人印象深刻的影响。 而且我必须说，使用本文中的技术尝试不同的设计真的很有趣。 透视属性与变换选项协同工作，以创造无数像 3D 设计一样的生活！ 不要忘记这些行（或墙）可以用 Divi 中的任何模块填充。 所以也可以随意尝试一些简介。 我希望这会激励你在今天创造一些独特的东西。

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

干杯!