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

chokcoco發表於2022-11-21

對 Chrome 擴充套件功能熟悉的小夥伴,可能都有用過 Chrome 的 3D 展示頁面層級關係這個功能。

可以透過 控制檯 --> 右邊的三個小點 --> More Tools --> Layers 開啟。即可以看到頁面的一個 3D 層級關係,像是這樣:

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

  1. 頁面層級概覽
  2. 快速釐清頁面 z-index 層級之間的關係
  3. 用於排查一些重繪過程(滾動過程)頁面卡頓

當然,也會存在一些問題,譬如當頁面的 DOM 數量太多的時候,這個外掛有的時候就會卡到無法互動了。同時,雖然可以快速釐清頁面 z-index 層級之間的關係,但是有的時候沒法很好的快速看清整個頁面巢狀關係。

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

本文,就將介紹一種,快速透過 CSS,構建頁面深度關係的 3D 檢視,快速清晰的釐清頁面 DOM 層級及深度之間的關係。並且可以運用在不同的節點單獨進行觀察。

當然,總體而言,是基於:

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

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

使用 CSS 構建 3D 視覺化 DOM 結構檢視

假設,我們首先隨時實現一段 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 的互動效果,實現 Hover 某一個 Div,展示出它當前的一個 3D 深度結構圖,看看效果:

很有意思的一個效果,到這裡應該能明白我們想做一個什麼東西了。總的來說,我們的核心需求就是,無論頁面的 DOM 結構如何,深度如何,我們希望能夠透過一種簡單的處理(純 CSS 實現),能夠快速檢視頁面的 3D 深度結構檢視

利用強大的 CSS 選擇器,批次處理樣式

整個效果看似複雜,其實可以利用 CSS 選擇器,很方便的遞迴呼叫自己。

因為希望我們的效果可以任意從某一個 DOM 節點處開始,所以,首先,我們需要一個根 CSS 節點,簡單的取個名字,為 .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 下的所有元素做一個快速的統一處理

那麼到這一步,我們的 CSS 程式碼大概會是這樣:

.g-3d-visual {
    transform-style: preserve-3d;
    transform: rotateY(-30deg) rotateX(30deg);

    * {
        position: relative;
        transform-style: preserve-3d;
        transform: translateZ(0);
    }
}

整個圖形就變成了這樣:

雖然變化不是很多,但是我們已經透過 * 萬用字元,對內部所有的元素都進行了簡單的處理。

圖形 3D 化

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

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

舉個例子,對於這一塊圖形:

它的構成是由:

  1. 主體部分由元素本身構成,並且對於結構的每一層,我們透過新增 transform: translateZ(16px),產生不一樣的深度
  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 個面,加上簡單的陰影,構建了一塊一塊的立體效果,我們看看目前為止的效果:

按照上述說的,我們可以希望換一種互動方式,實現當滑鼠 Hover 到 DOM 的某一層級時,才觸發元素 3D 深度變換。

簡單改造下程式碼即可,並且,對於一些重複用到的元素,也可以再利用 CSS 變數統一一下。至此,我們的完整 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 程式碼注入到任意頁面後,給你希望觀察的節點,新增上 .g-3d-visual 樣式即可。

這裡我嘗試的是,當前正在寫作的 Github Issues 頁面,看看效果:

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

這一段簡單的程式碼,再簡單改造一番,譬如和 Chrome 擴充套件相結合,快速注入程式碼,快速指定給哪個元素新增 .g-3d-visual 類名,以及修改配色方案等等,就可以實現一個快速對頁面層級進行觀察的小外掛!

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

總結一下

到這裡,我們即可以再簡單總結一下完整的步驟:

  • 需要一個整體的 3D 效果,因此需要一個根 CSS 節點,為 .g-3d-visual,並且給它設定好相關的 CSS 3D 屬性值,讓整個內部元素可以 3D 化
  • 利用通配選擇符 *,對 .g-3d-visual 下的所有元素做一個快速的統一處理
  • 利用每個元素的另外兩個偽元素,實現每一層效果的 3D 立體感,並且逐層利用 translateZ() 遞進深度
  • 透過 :hovertransition 等設定,實現整體的互動效果

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

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

最後,完整的程式碼,你可以戳這裡獲取:CodePen Demo -- 3D Visualization of DOM

最後

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

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。

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

相關文章