网页元素3D效果展示

作为一个前端从业人员，相信大家对z-index都不陌生，那么在一个平面的世界里，怎么理解z-index这个属性。

在理解z-index的时候，我们首先要清楚，一个页面是怎样构建坐标轴的，以电脑屏左上角为起点，水平方向从左往右为x轴正向，垂直方向从上往下为y轴正向，屏幕从里往外为z轴正向，这样就形成了我们便于理解的三维结构。

对于定位元素，z-index才会起作用；z-index的值默认为 0 ，即都处于html机构层之上，同一布局层【元素嵌套深度】，后面定位元素会压在前面元素之上。

那么我们在开发过程中如何直观的看到这样的布局，那就要用到网页元素3d效果展示，，所幸，firefox为我们提供了这么一个好的插件，方便我们进行观看。

对于新版的firefox，4.7版本后的，打开附加组件工具，搜索 Tilt ,下载安装，重启浏览器，shift+ctrl +L 即可启动3D展示；

4.7之前的版本，打开调试工具，工具栏里找到3D展示，打钩。