對(duì) Chrome 擴(kuò)展功能熟悉的小伙伴，可能都有用過 Chrome 的 3D 展示頁面層級(jí)關(guān)系這個(gè)功能。

可以通過 控制臺(tái) --> 右邊的三個(gè)小點(diǎn) --> More Tools --> Layers 打開。即可以看到頁面的一個(gè) 3D 層級(jí)關(guān)系，像是這樣：

這個(gè)功能有幾個(gè)不錯(cuò)的作用：

1. 頁面層級(jí)概覽。
2. 快速厘清頁面 z-index 層級(jí)之間的關(guān)系。
3. 用于排查一些重繪過程（滾動(dòng)過程）頁面卡頓。

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

同時(shí)，它只能看整個(gè)頁面的概覽，無法選取部分節(jié)點(diǎn)進(jìn)行觀察。

本文，就將介紹一種，快速通過 CSS，構(gòu)建頁面深度關(guān)系的 3D 視圖，快速清晰的厘清頁面 DOM 層級(jí)及深度之間的關(guān)系。并且可以運(yùn)用在不同的節(jié)點(diǎn)單獨(dú)進(jìn)行觀察。

當(dāng)然，總體而言，是基于：

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

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

使用 CSS 構(gòu)建 3D 可視化 DOM 結(jié)構(gòu)視圖

假設(shè)，我們首先隨時(shí)實(shí)現(xiàn)一段 DOM 結(jié)構(gòu)，其簡單的代碼如下：

<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;
        }
    }
}

得到這樣一個(gè)最多深度為 4 層的簡單結(jié)構(gòu)：

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

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

很有意思的一個(gè)效果，到這里應(yīng)該能明白我們想做一個(gè)什么東西了?？偟膩碚f，我們的核心需求就是，無論頁面的 DOM 結(jié)構(gòu)如何，深度如何，我們希望能夠通過一種簡單的處理（純 CSS 實(shí)現(xiàn)），能夠快速查看頁面的 3D 深度結(jié)構(gòu)視圖。

利用強(qiáng)大的 CSS 選擇器，批量處理樣式

整個(gè)效果看似復(fù)雜，其實(shí)可以利用 CSS 選擇器，很方便的遞歸調(diào)用自己。

因?yàn)橄Ｍ覀兊男Ч梢匀我鈴哪骋粋€(gè) DOM 節(jié)點(diǎn)處開始，所以，首先，我們需要一個(gè)根 CSS 節(jié)點(diǎn)，簡單的取個(gè)名字，為 .g-3d-visual。

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

.g-3d-visual {
    // ...
}

為了讓整個(gè)代碼更易理解，我們會(huì)用上 SASS 這種預(yù)處理器，主要是利用它的選擇器可以的嵌套特性。

至此，我們可以開始構(gòu)建我們的基礎(chǔ)樣式，首先我們會(huì)處理 2 點(diǎn)：

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

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

.g-3d-visual {
    transform-style: preserve-3d;
    transform: rotateY(-30deg) rotateX(30deg);
    * {
        position: relative;
        transform-style: preserve-3d;
        transform: translateZ(0);
    }
}

整個(gè)圖形就變成了這樣：

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

圖形 3D 化

下一步其實(shí)就非常關(guān)鍵了。

我們需要用到元素本身，和元素的兩個(gè)偽元素，構(gòu)建元素的立體效果。

舉個(gè)例子，對(duì)于這一塊圖形：

它的構(gòu)成是由：

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

看看代碼：

.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);
        }
    }
}

那么，其實(shí)到這里，基本上可以說核心代碼都有了，最為核心的是需要理解：

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

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

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

簡單改造下代碼即可，并且，對(duì)于一些重復(fù)用到的元素，也可以再利用 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[1]。

擴(kuò)展遷移

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

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

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

當(dāng)然，可能顏色沒有搭配的特別好，但是要知道，整兒頁面的 DOM 結(jié)構(gòu)是相當(dāng)之復(fù)雜的。不過整體效果還是很不錯(cuò)的，而且實(shí)際操作的過程中，也并不會(huì)感覺卡頓。

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

上述效果我是手動(dòng)修改了當(dāng)前頁面的 HTML 代碼，注入的相應(yīng)的 CSS 代碼 :)

總結(jié)一下

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

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

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

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

最后，完整的代碼，你可以戳這里獲?。篊odePen Demo -- 3D Visualization of DOM[2]。

最后

好了，本文到此結(jié)束，希望本文對(duì)你有所幫助 :)

參考資料

[1]CodePen Demo -- 3D Visualization of DOM: ??https://codepen.io/Chokcoco/pen/oNdKzNX。??

[2]CodePen Demo -- 3D Visualization of DOM: ?https://codepen.io/Chokcoco/pen/oNdKzNX。??