快速构建页面结构熟悉Chrome扩展功能的朋友可能用过Chrome的3D显示页面层级功能。可以通过控制台打开-->右边三个小点-->更多工具-->图层。也就是可以看到一个页面的3D层级关系，像这样：这个函数有几个不错的功能：页面层级概览快速理清页面z-index层级关系用来排查一些重绘过程（滚动过程）页面当然,有一些问题。比如当页面DOM过多的时候，有时候这个插件会卡住无法交互。同时，虽然可以快速明确页面的z-index层级之间的关系，但有时无法快速看出整个页面的嵌套关系。同时，它只能看到整个页面的概况，不能选择部分节点进行观察。在这篇文章中，我将介绍一种3D视图，快速使用CSS构建页面深度关系的3D视图，快速清晰的理清页面DOM层级与深度的关系。并且可以用来在不同的节点分别观察。当然总的来说是基于：CSS选择器CSS3D属性的大规模综合应用。整体看完，相信你能学到很多东西。使用CSS构建一个3D可视DOM结构视图假设，我们先实现一个任意时刻的DOM结构，简单的代码如下：
