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

来源:https://www.cnblogs.com/coco1s/archive/2022/11/21/16910745.html
-Advertisement-
Play Games

對 Chrome 擴展功能熟悉的小伙伴，可能都有用過 Chrome 的 3D 展示頁面層級關係這個功能。 可以通過 控制台 --> 右邊的三個小點 --> More Tools --> Layers 打開。即可以看到頁面的一個 3D 層級關係，像是這樣： 這個功能有幾個不錯的作用： 頁面層級概覽 快 ...


對 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 代碼

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 5分鐘搞定 SQL Server 到 MySQL 數據遷移和同步
    簡述 SQL Server 是一個值得信賴的老牌資料庫系統，自從 1988 年由 Microsoft、Sybase 和 Ashton-Tate 三家公司共同推出之後就一直不斷迭代更新。而如今我們提到 SQL Server 通常是指 Microsoft 從 SQL Server 2000 之後的版本。 ...
  • 原來用 MySQL 也可以做全文檢索
    我是風箏，公眾號「古時的風箏」，專註於 Java技術 及周邊生態。 文章會收錄在 JavaNewBee 中，更有 Java 後端知識圖譜，從小白到大牛要走的路都在裡面。 有朋友聊到他們的系統中要接入全文檢索，這讓我想起了很久以前為一個很古老的項目添加搜索功能的事兒。 一提到全文檢索，我們首先就會想到 ...
  • [Android開發學iOS系列] TableView展現一個list
    TableView 基礎 本文講講TableView的基本使用. 順便介紹一下delegation. TableView用來做什麼 TableView用來展示一個很長的list. 和Android中的RecyclerView不同, iOS中的TableView只能是豎直方向的list. 如何寫一個最 ...
  • Android網路請求(1)
    Android網路請求(1) ​ 安卓開髮網絡請求可謂是安卓開發的靈魂，如果你不會網路請求，那麼你開發的應用軟體就是一具沒有靈魂的枯骨。 ​ 在安卓開發中進行網路請求和java中的網路請求有異曲同工之妙，但是安卓軟體畢竟的安裝在我們手機上的，而平常的應用軟體下載後會要求你給與許可權，否則就沒辦法使用， ...
  • Android 自定義標題欄組件
    1.繪製Layout文件 首先新建一個layout文件, 命名為title_bar, 在裡面繪製標題欄, 我需要的是一個有返回鍵和當前頁面標題的titleBar 佈局代碼如下 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:andr ...
  • Android Studio虛擬機無法顯示
    故障 做開發項目做的好好的，點了下清理工具，Android虛擬機的視窗沒了 回到Device Manager可以看到虛擬機確實還打開著，但就是無法啟動界面 解決 多半是清理的時候清理掉了前臺，找了半天也沒找到再次打開前臺的方法，重新運行程式也可以正常運行，就是不彈出界面。考慮殺掉後臺，讓Emulat ...
  • vue+ arcgis for js4.x 地方坐標系地圖服務（Spatial Reference）
    初始化地圖 引入 import * as esriLoader from 'esri-loader' 主要定義 private mapId: string = '' private map: any private mapview: any private markers: any = {} // ...
  • 自學 TypeScript 第四天，手把手項目搭建
    前言： 學了三天，我們學習了 TS 的基本類型聲明，TS 的編譯，webpack 打包，其實也就差不多了，剩下的也就一些 類，繼承，構造函數，抽象類，泛型一些的，如果都細緻的講可能寫好久，感興趣的可以自己找資料細緻的去學一下 學習代碼或一個新語法，最好的方法無非就是做項目，從這個過程中學會如何去使用 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類