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