Amazing！巧妙构建页面结构的 3D Visualization

20230306132006f8d54c44220e0d50a0950646fb725e975571f0575 ,对 Chrome 扩展功能熟悉的小伙伴，可能都有用过 Chrome 的 3D 展示页面层级关系这个功能。,可以通过控制台 --> 右边的三个小点 --> More Tools --> Layers 打开。即可以看到页面的一个 3D 层级关系，像是这样：, 20230306132232c3fd9d6999d62abebdf27060bf848697461a70658 ,这个功能有几个不错的作用：,当然，也会存在一些问题，譬如当页面的 DOM 数量太多的时候，这个插件有的时候就会卡到无法交互了。同时，虽然可以快速厘清页面 z-index 层级之间的关系，但是有的时候没法很好的快速看清整个页面嵌套关系。,同时，它只能看整个页面的概览，无法选取部分节点进行观察。,本文，就将介绍一种，快速通过 CSS，构建页面深度关系的 3D 视图，快速清晰的厘清页面 DOM 层级及深度之间的关系。并且可以运用在不同的节点单独进行观察。,当然，总体而言，是基于：,的一次大规模综合应用，整体看完，相信你能学到不少东西。,假设，我们首先随时实现一段 DOM 结构，其简单的代码如下：,部分 CSS 代码：,得到这样一个最多深度为 4 层的简单结构：, 20230306132007140346b69a060afefb1191d9de0364a5307c0b228 ,而我们希望，快速看这个页面的 3D 深度图，像是这样：, 20230306132234b3facc79079921507c7596b4a78f2f86d0e7c2192 ,又或者，可以使用类似于这样一种 Hover 的交互效果，实现 Hover 某一个 Div，展示出它当前的一个 3D 深度结构图，看看效果：, 20230306132009d8950fb89cb95c2f760670659fcbcc08ffcbe0565 ,很有意思的一个效果，到这里应该能明白我们想做一个什么东西了。总的来说，我们的核心需求就是，无论页面的 DOM 结构如何，深度如何，我们希望能够通过一种简单的处理（纯 CSS 实现），能够快速查看页面的 3D 深度结构视图。,整个效果看似复杂，其实可以利用 CSS 选择器，很方便的递归调用自己。,因为希望我们的效果可以任意从某一个 DOM 节点处开始，所以，首先，我们需要一个根 CSS 节点，简单的取个名字，为 .g-3d-visual。,那么整个 3D 化的样式，我们都会写在 .g-3d-visual 的作用域下：,为了让整个代码更易理解，我们会用上 SASS 这种预处理器，主要是利用它的选择器可以的嵌套特性。,至此，我们可以开始构建我们的基础样式，首先我们会处理 2 点：,那么到这一步，我们的 CSS 代码大概会是这样：,整个图形就变成了这样：, 20230306132010196479014eea5da376f254a624aa8f4bf17218987 ,虽然变化不是很多，但是我们已经通过 * 通配符，对内部所有的元素都进行了简单的处理。,下一步其实就非常关键了。,我们需要用到元素本身，和元素的两个伪元素，构建元素的立体效果。,举个例子，对于这一块图形：, 20230306132010756f2e792fc51551ebd092789c8c5f4314f838988 ,它的构成是由：,看看代码：,那么，其实到这里，基本上可以说核心代码都有了，最为核心的是需要理解：,这样，我们利用 3 个面，加上简单的阴影，构建了一块一块的立体效果，我们看看目前为止的效果：, 20230306132011555b024384d886e3925023d1e76743c3d61cc4133 ,按照上述说的，我们可以希望换一种交互方式，实现当鼠标 Hover 到 DOM 的某一层级时，才触发元素 3D 深度变换。,简单改造下代码即可，并且，对于一些重复用到的元素，也可以再利用 CSS 变量统一一下。至此，我们的完整 CSS 代码：,这样，我们也就得到了题图一开始的 Hover 示意图的效果：, 20230306132012166cb5f2645ce65af26151b16f2b5f6635fe51970 ,CodePen Demo -- 3D Visualization of DOM[1]。,有了上述代码之后，由于是 SASS 代码，所以记得编译一下，即可拿到完整的 .g-3d-visual 下相关的所有 CSS 代码。,尝试把整段 CSS 代码注入到任意页面后，给你希望观察的节点，添加上 .g-3d-visual 样式即可。,这里我尝试的是，当前正在写作的 Github Issues 页面，看看效果：, 2023030614132964c9bb943d8767893028486dca591814514043826 , 2023030613201221096d434966b1cd43e352c6d80897129799fb420 ,当然，可能颜色没有搭配的特别好，但是要知道，整儿页面的 DOM 结构是相当之复杂的。不过整体效果还是很不错的，而且实际操作的过程中，也并不会感觉卡顿。,这一段简单的代码，再简单改造一番，譬如和 Chrome 扩展相结合，快速注入代码，快速指定给哪个元素添加 .g-3d-visual 类名，以及修改配色方案等等，就可以实现一个快速对页面层级进行观察的小插件！,到这里，我们即可以再简单总结一下完整的步骤：,当然，这种做法肯定会有一些小问题，譬如如果元素的伪元素已经使用了，那么在 3D 化的效果中，将会被改写。但是由于不是完全覆盖，因此可能会造成一些样式错误。,其次，如果父子两层 DIV 完全是大小一模一样完全重叠在一起，在视觉上也会有些影响。,最后，完整的代码，你可以戳这里获取：CodePen Demo -- 3D Visualization of DOM[2]。,好了，本文到此结束，希望本文对你有所帮助 :),[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。