一段简单的代码，把网页3D分层

打开浏览器开发者工具，把下面的代码复制进去，回车执行，就能看到效果啦。
以百度为例，正常页面如下

image.png

3D分层后，如下

image.png

function updateChildrenZ(parent, z = 0) {
  let children = parent.children;
  for (let i = 0; i < children.length; i++) {
    let child = children[i];
    child.style.transition = 'all 1s;';
    child.style.transform = 'translateZ(' + z + 'px)';
    child.style['transform-style'] = 'preserve-3d';
    let style = window.getComputedStyle(child);
    if (style.display === 'inline') {
      child.style.display = 'inline-block';
    }
    updateChildrenZ(child, z + 5);
  }
}
document.head.innerHTML += '<style>* {transition: all 1s;}</style>';
setTimeout(() => {
  document.firstElementChild.style.perspective = '2000px';
  document.body.style.transition = 'all 1s;';
  document.body.style.transform = 'translatez(-1000px) rotateX(40deg)';
  document.body.style['transform-style'] = 'preserve-3d';
  updateChildrenZ(document.body);
}, 1000);