depth.js

(function(root) {
  Object.assign(document.body.style, {
    'transform': 'perspective(500px) rotateY(12deg) rotateX(9deg) rotateZ(-4deg) translate3d(56%, 26%, -516px)',
    'transform-origin': '0 0',
    'transform-style': 'preserve-3d'
  })

  const node_style = {
    'outline': '3px solid rgba(255,0,150,0.5)',
    'transform-style': 'preserve-3d',
    'background': 'rgba(0150,255, 0.2)'
  }

  const depth = new WeakMap()
  let max = 0

  const step = (node, d) => {
    depth.set(node, d)
    max = Math.max(d, max)
    for(let c of node.children) step(c, d + 1)
  }
  step(document.body, 0)
  
  const fringe = Array.from(document.body.children)
  
  while(fringe.length) {
    let node = fringe.pop()
    
    const Z = depth.get(node) * 100 / max

    Object.assign(node.style, 
      {transform: `translateZ(${Z}px)`}, 
      node_style
    )
    
    fringe.push.apply(fringe, node.children)
  }

})(document.body)