快速構建頁面結構的 3D Visualization

時間：2023-07-24 09:57:01 | 來源：網(wǎng)站運營

時間：2023-07-24 09:57:01 來源：網(wǎng)站運營

快速構建頁面結構的 3D Visualization：對 Chrome 擴展功能熟悉的小伙伴，可能都有用過 Chrome 的 3D 展示頁面層級關系這個功能。

可以通過 控制臺 --> 右邊的三個小點 --> More Tools --> Layers 打開。即可以看到頁面的一個 3D 層級關系，像是這樣：

這個功能有幾個不錯的作用：

1. 頁面層級概覽
2. 快速厘清頁面 z-index 層級之間的關系
3. 用于排查一些重繪過程（滾動過程）頁面卡頓

當然，也會存在一些問題，譬如當頁面的 DOM 數(shù)量太多的時候，這個插件有的時候就會卡到無法交互了。同時，雖然可以快速厘清頁面 z-index 層級之間的關系，但是有的時候沒法很好的快速看清整個頁面嵌套關系。

同時，它只能看整個頁面的概覽，無法選取部分節(jié)點進行觀察。

本文，就將介紹一種，快速通過 CSS，構建頁面深度關系的 3D 視圖，快速清晰的厘清頁面 DOM 層級及深度之間的關系。并且可以運用在不同的節(jié)點單獨進行觀察。

當然，總體而言，是基于：

1. CSS 選擇器
2. CSS 3D 屬性

的一次大規(guī)模綜合應用，整體看完，相信你能學到不少東西。

使用 CSS 構建 3D 可視化 DOM 結構視圖

假設，我們首先隨時實現(xiàn)一段 DOM 結構，其簡單的代碼如下：

<div class="g-wrap"> <div class="g-header">This is Header</div> <div class="g-content"> <div class="g-inner"> <div class="g-box">Lorem LOrem</div> <div class="g-box">Lorem LOrem</div> </div> </div> <div class="g-footer">This is Footer</div></div>部分 CSS 代碼：

.g-wrap { margin: auto; width: 300px; height: 500px; background: #ddd; display: flex; align-content: flex-start; flex-wrap: wrap; flex-direction: column; gap: 10px; padding: 10px; & > div { width: 100%; flex-grow: 1; border: 1px solid #333; }}.g-content { height: 200px; display: flex; padding: 10px; box-sizing: border-box; .g-inner { display: flex; padding: 10px; gap: 10px; & > div { width: 100px; height: 50px; border: 1px solid #333; } }}得到這樣一個最多深度為 4 層的簡單結構：

而我們希望，快速看這個頁面的 3D 深度圖，像是這樣：

又或者，可以使用類似于這樣一種 Hover 的交互效果，實現(xiàn) Hover 某一個 Div，展示出它當前的一個 3D 深度結構圖，看看效果：

很有意思的一個效果，到這里應該能明白我們想做一個什么東西了。總的來說，我們的核心需求就是，無論頁面的 DOM 結構如何，深度如何，我們希望能夠通過一種簡單的處理（純 CSS 實現(xiàn)），能夠快速查看頁面的 3D 深度結構視圖。

利用強大的 CSS 選擇器，批量處理樣式

整個效果看似復雜，其實可以利用 CSS 選擇器，很方便的遞歸調用自己。

因為希望我們的效果可以任意從某一個 DOM 節(jié)點處開始，所以，首先，我們需要一個根 CSS 節(jié)點，簡單的取個名字，為 .g-3d-visual。

那么整個 3D 化的樣式，我們都會寫在 .g-3d-visual 的作用域下：

.g-3d-visual { // ...}為了讓整個代碼更易理解，我們會用上 SASS 這種預處理器，主要是利用它的選擇器可以的嵌套特性。

至此，我們可以開始構建我們的基礎樣式，首先我們會處理 2 點：

1. 整個效果，會稍微的 3D 化，因此會給 .g-3d-visual 根元素添加 3D 相關的樣式，譬如 transform-style: preserve-3d，讓整個內部元素可以 3D 化
2. 可以利用通配選擇符 *，對 .g-3d-visual 下的所有元素做一個快速的統(tǒng)一處理

那么到這一步，我們的 CSS 代碼大概會是這樣：

.g-3d-visual { transform-style: preserve-3d; transform: rotateY(-30deg) rotateX(30deg); * { position: relative; transform-style: preserve-3d; transform: translateZ(0); }}整個圖形就變成了這樣：

雖然變化不是很多，但是我們已經(jīng)通過 * 通配符，對內部所有的元素都進行了簡單的處理。

圖形 3D 化

下一步其實就非常關鍵了。

我們需要用到元素本身，和元素的兩個偽元素，構建元素的立體效果。

舉個例子，對于這一塊圖形：

它的構成是由：

1. 主體部分由元素本身構成，并且對于結構的每一層，我們通過添加 transform: translateZ(16px)，產(chǎn)生不一樣的深度
2. 右側和下側的兩個面，剛好由元素的兩個偽元素通過 transform 旋轉不同的角度得到
3. 整體顏色的調整及陰影

看看代碼：

.g-3d-visual { transform-style: preserve-3d; transform: rotateY(-30deg) rotateX(30deg); * { position: relative; transform-style: preserve-3d; background: rgba(0, 0, 255, 0.2); transform: translateZ(16px); box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); &::before, &::after { content: ""; display: block; position: absolute; background: rgba(0, 0, 255, 0.2); } &::before { width: 100%; height: 16px; left: 0; bottom: 0; transform-origin: center bottom; transform: scaleY(1) rotateX(90deg); } &::after { width: 16px; height: 100%; right: 0; top: 0; transform-origin: right center; transform: scaleX(1) rotateY(-90deg); } }}那么，其實到這里，基本上可以說核心代碼都有了，最為核心的是需要理解：

1. 我們給 .g-3d-visual 下每一層的元素，也就是 * 通配符選擇的元素，都添加了一個 transform: translateZ(16px)，這一點非常重要，是為了給元素逐漸增加 Z 軸方向的深度
2. 兩個偽元素的運用需要好好理解，它們是用于構建整體的 3D 效果的關鍵因素
3. box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1) 這一個小小的陰影效果的添加，讓整個效果看起來更加的真實

這樣，我們利用 3 個面，加上簡單的陰影，構建了一塊一塊的立體效果，我們看看目前為止的效果：

按照上述說的，我們可以希望換一種交互方式，實現(xiàn)當鼠標 Hover 到 DOM 的某一層級時，才觸發(fā)元素 3D 深度變換。

簡單改造下代碼即可，并且，對于一些重復用到的元素，也可以再利用 CSS 變量統(tǒng)一一下。至此，我們的完整 CSS 代碼：

<div class="g-wrap g-3d-visual"> <div class="g-header">This is Header</div> <div class="g-content"> <div class="g-inner"> <div class="g-box">Lorem LOrem</div> <div class="g-box">Lorem LOrem</div> </div> </div> <div class="g-footer">This is Footer</div></div>:root { --side-height: 16px; --hover-color: rgba(0, 0, 255, 0.2); --box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); --transform-duration: 0.3s;}.g-3d-visual { transform-style: preserve-3d; transform: rotateY(-30deg) rotateX(30deg); * { position: relative; transform-style: preserve-3d; transform: translateZ(0); transition: transform var(--transform-duration); cursor: pointer; &::before, &::after { content: ""; display: block; position: absolute; background: transparent; transition: all var(--transform-duration); } &::before { width: 100%; height: var(--side-height); left: 0; bottom: 0; transform-origin: center bottom; transform: scaleY(0) rotateX(90deg); } &::after { width: var(--side-height); height: 100%; right: 0; top: 0; transform-origin: right center; transform: scaleX(0) rotateY(-90deg); } &:hover { background: var(--hover-color); transform: translateZ(var(--side-height)); box-shadow: var(--box-shadow); &::before, &::after { background: var(--hover-color); } &::before { transform: scaleY(1) rotateX(90deg); } &::after { transform: scaleX(1) rotateY(-90deg); } } }}這樣，我們也就得到了題圖一開始的 Hover 示意圖的效果：

CodePen Demo -- 3D Visualization of DOM

擴展遷移

有了上述代碼之后，由于是 SASS 代碼，所以記得編譯一下，即可拿到完整的 .g-3d-visual 下相關的所有 CSS 代碼。

嘗試把整段 CSS 代碼注入到任意頁面后，給你希望觀察的節(jié)點，添加上 .g-3d-visual 樣式即可。

這里我嘗試的是，當前正在寫作的 Github Issues 頁面，看看效果：

當然，可能顏色沒有搭配的特別好，但是要知道，整兒頁面的 DOM 結構是相當之復雜的。不過整體效果還是很不錯的，而且實際操作的過程中，也并不會感覺卡頓。

這一段簡單的代碼，再簡單改造一番，譬如和 Chrome 擴展相結合，快速注入代碼，快速指定給哪個元素添加 .g-3d-visual 類名，以及修改配色方案等等，就可以實現(xiàn)一個快速對頁面層級進行觀察的小插件！

上述效果我是手動修改了當前頁面的 HTML 代碼，注入的相應的 CSS 代碼 :)

總結一下

到這里，我們即可以再簡單總結一下完整的步驟：

• 需要一個整體的 3D 效果，因此需要一個根 CSS 節(jié)點，為 .g-3d-visual，并且給它設置好相關的 CSS 3D 屬性值，讓整個內部元素可以 3D 化
• 利用通配選擇符 *，對 .g-3d-visual 下的所有元素做一個快速的統(tǒng)一處理
• 利用每個元素的另外兩個偽元素，實現(xiàn)每一層效果的 3D 立體感，并且逐層利用 translateZ() 遞進深度
• 通過 :hover、transition 等設置，實現(xiàn)整體的交互效果

當然，這種做法肯定會有一些小問題，譬如如果元素的偽元素已經(jīng)使用了，那么在 3D 化的效果中，將會被改寫。但是由于不是完全覆蓋，因此可能會造成一些樣式錯誤。

其次，如果父子兩層 DIV 完全是大小一模一樣完全重疊在一起，在視覺上也會有些影響。

最后，完整的代碼，你可以戳這里獲?。?b>CodePen Demo -- 3D Visualization of DOM

最后

好了，本文到此結束，希望本文對你有所幫助 :)

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。