如何使用透視和變換選項在 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 中的任何模塊填充。 所以也可以隨意嘗試一些簡介。 我希望這會激勵你在今天創造一些獨特的東西。

我期待在評論中收到您的來信。

乾杯!