This one is a quick and simple way to visualize and inspect the DOM in 3D with mouse movement; more fun than practical. Paste this into your browser console and enjoy:
// 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks. // You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/) (() => { const SHOW_SIDES = false; // color sides of DOM nodes? const COLOR_SURFACE = true; // color tops of DOM nodes? const COLOR_RANDOM = false; // randomise color? const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com) const MAX_ROTATION = 180; // set to 360 to rotate all the way round const THICKNESS = 20; // thickness of layers const DISTANCE = 10000; // ¯\\_(ツ)_/¯ function getRandomColor() { const hue = Math.floor(Math.random() * 360); const saturation = 50 + Math.floor(Math.random() * 30); const lightness = 40 + Math.floor(Math.random() * 30); return `hsl(${hue}, ${saturation}%, ${lightness}%)`; } const getDOMDepth = element => [...element.children].reduce((max, child) => Math.max(max, getDOMDepth(child)), 0) + 1; const domDepthCache = getDOMDepth(document.body); const getColorByDepth = (depth, hue = 0, lighten = 0) => `hsl(${hue}, 75%, ${Math.min(10 + depth * (1 + 60 / domDepthCache), 90) + lighten}%)`; // Apply initial styles to the body to enable 3D perspective const body = document.body; body.style.overflow = "visible"; body.style.transformStyle = "preserve-3d"; body.style.perspective = DISTANCE; const perspectiveOriginX = (window.innerWidth / 2); const perspectiveOriginY = (window.innerHeight / 2); body.style.perspectiveOrigin = body.style.transformOrigin = `${perspectiveOriginX}px ${perspectiveOriginY}px`; traverseDOM(body, 0, 0, 0); document.addEventListener("mousemove", (event) => { const rotationY = (MAX_ROTATION * (1 - event.clientY / window.innerHeight) - (MAX_ROTATION / 2)); const rotationX = (MAX_ROTATION * event.clientX / window.innerWidth - (MAX_ROTATION / 2)); body.style.transform = `rotateX(${rotationY}deg) rotateY(${rotationX}deg)`; }); // Create side faces for an element to give it a 3D appearance function createSideFaces(element, color) { if (!SHOW_SIDES) { return } const width = element.offsetWidth; const height = element.offsetHeight; const fragment = document.createDocumentFragment(); // Helper function to create and style a face const createFace = ({ width, height, transform, transformOrigin, top, left, right, bottom }) => { const face = document.createElement('div'); face.className = 'dom-3d-side-face'; Object.assign(face.style, { transformStyle: "preserve-3d", backfaceVisibility: 'hidden', position: 'absolute', width: `${width}px`, height: `${height}px`, background: color, transform, transformOrigin, overflow: 'hidden', willChange: 'transform', top, left, right, bottom }); fragment.appendChild(face); } // Top face createFace({ width, height: THICKNESS, transform: `rotateX(-270deg) translateY(${-THICKNESS}px)`, transformOrigin: 'top', top: '0px', left: '0px', }); // Right face createFace({ width: THICKNESS, height, transform: 'rotateY(90deg)', transformOrigin: 'left', top: '0px', left: `${width}px` }); // Bottom face createFace({ width, height: THICKNESS, transform: `rotateX(-90deg) translateY(${THICKNESS}px)`, transformOrigin: 'bottom', bottom: '0px', left: '0px' }); // Left face createFace({ width: THICKNESS, height, transform: `translateX(${-THICKNESS}px) rotateY(-90deg)`, transformOrigin: 'right', top: '0px', left: '0px' }); element.appendChild(fragment); } // Recursive function to traverse child nodes, apply 3D styles, and create side faces function traverseDOM(parentNode, depthLevel, offsetX, offsetY) { for (let children = parentNode.childNodes, childrenCount = children.length, i = 0; i < childrenCount; i++) { const childNode = children[i]; if (!(1 === childNode.nodeType && !childNode.classList.contains('dom-3d-side-face'))) continue; const color = COLOR_RANDOM ? getRandomColor() : getColorByDepth(depthLevel, COLOR_HUE, -5); Object.assign(childNode.style, { transform: `translateZ(${THICKNESS}px)`, overflow: "visible", backfaceVisibility: "hidden", isolation: "auto", transformStyle: "preserve-3d", backgroundColor: COLOR_SURFACE ? color : getComputedStyle(childNode).backgroundColor, willChange: 'transform', }); let updatedOffsetX = offsetX; let updatedOffsetY = offsetY; if (childNode.offsetParent === parentNode) { updatedOffsetX += parentNode.offsetLeft; updatedOffsetY += parentNode.offsetTop; } createSideFaces(childNode, color); traverseDOM(childNode, depthLevel + 1, updatedOffsetX, updatedOffsetY); } } })()
Sourced from: OrionReed/dom3d.js.