對 Chrome 擴充套件功能熟悉的小夥伴,可能都有用過 Chrome 的 3D 展示頁面層級關係這個功能。
可以透過 控制檯 --> 右邊的三個小點 --> More Tools --> Layers 開啟。即可以看到頁面的一個 3D 層級關係,像是這樣:
這個功能有幾個不錯的作用:
- 頁面層級概覽
- 快速釐清頁面 z-index 層級之間的關係
- 用於排查一些重繪過程(滾動過程)頁面卡頓
當然,也會存在一些問題,譬如當頁面的 DOM 數量太多的時候,這個外掛有的時候就會卡到無法互動了。同時,雖然可以快速釐清頁面 z-index 層級之間的關係,但是有的時候沒法很好的快速看清整個頁面巢狀關係。
同時,它只能看整個頁面的概覽,無法選取部分節點進行觀察。
本文,就將介紹一種,快速透過 CSS,構建頁面深度關係的 3D 檢視,快速清晰的釐清頁面 DOM 層級及深度之間的關係。並且可以運用在不同的節點單獨進行觀察。
當然,總體而言,是基於:
- CSS 選擇器
- 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 點:
- 整個效果,會稍微的 3D 化,因此會給
.g-3d-visual
根元素新增 3D 相關的樣式,譬如transform-style: preserve-3d
,讓整個內部元素可以 3D 化 - 可以利用通配選擇符
*
,對.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 化
下一步其實就非常關鍵了。
我們需要用到元素本身,和元素的兩個偽元素,構建元素的立體效果。
舉個例子,對於這一塊圖形:
它的構成是由:
- 主體部分由元素本身構成,並且對於結構的每一層,我們透過新增
transform: translateZ(16px)
,產生不一樣的深度 - 右側和下側的兩個面,剛好由元素的兩個偽元素透過 transform 旋轉不同的角度得到
- 整體顏色的調整及陰影
看看程式碼:
.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);
}
}
}
那麼,其實到這裡,基本上可以說核心程式碼都有了,最為核心的是需要理解:
- 我們給
.g-3d-visual
下每一層的元素,也就是*
萬用字元選擇的元素,都新增了一個transform: translateZ(16px)
,這一點非常重要,是為了給元素逐漸增加 Z 軸方向的深度 - 兩個偽元素的運用需要好好理解,它們是用於構建整體的 3D 效果的關鍵因素
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()
遞進深度 - 透過
:hover
、transition
等設定,實現整體的互動效果
當然,這種做法肯定會有一些小問題,譬如如果元素的偽元素已經使用了,那麼在 3D 化的效果中,將會被改寫。但是由於不是完全覆蓋,因此可能會造成一些樣式錯誤。
其次,如果父子兩層 DIV 完全是大小一模一樣完全重疊在一起,在視覺上也會有些影響。
最後,完整的程式碼,你可以戳這裡獲取:CodePen Demo -- 3D Visualization of DOM
最後
好了,本文到此結束,希望本文對你有所幫助 :)
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。