对 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 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。