3D
javascript:(function() { var tri = { menu: document.createElement("div"), limit: document.createElement("input"), gap: document.createElement("input"), sag: document.createElement("input"), fov: document.createElement("input"), flo: document.createElement("input"), off: document.createElement("input"), non: document.createElement("input"), end: document.createElement("input"), tgl: document.createElement("input"), cssStatic: document.createElement("style"), cssDynamic: document.createElement("style"), orientation: {"yaw": 0, "pitch": 0, "roll": 0}, mouseMove: function(e) { tri.orientation.yaw = -Math.cos(Math.PI * e.clientX / innerWidth) * 180 * tri.limit.value; tri.orientation.pitch = Math.cos(Math.PI * e.clientY / innerHeight) * 180 * tri.limit.value; tri.updateBody(); }, gyroMove: function(e) { var landscape = innerWidth > innerHeight; if (landscape) { tri.orientation.yaw = -(e.alpha + e.beta); tri.orientation.pitch = e.gamma - Math.sign(90 - Math.abs(e.beta)) * 90; } else { tri.orientation.yaw = -(e.alpha + e.gamma); tri.orientation.pitch = e.beta - 90; } tri.updateBody(); }, updateOrigin: function(e) { document.body.style.transformOrigin = (innerWidth / 2 + pageXOffset) + "px " + (innerHeight / 2 + pageYOffset) + "px"; }, updateBody: function() { document.body.style.transform = "perspective(" + Math.pow(2, tri.fov.value) + "px) translateZ(-" + tri.gap.value + "px) rotateX(" + tri.orientation.pitch + "deg) rotateY(" + tri.orientation.yaw + "deg)"; }, updateCSS: function() { if (tri.non.checked) tri.cssDynamic.innerHTML = ""; else if (tri.off.checked) tri.cssDynamic.innerHTML = "* { transform-style: preserve-3d; }"; else { for (var depth = 0; document.querySelector("body" + " > *".repeat(depth)); depth++); var gap = tri.gap.value / depth; var sag = -Math.PI * tri.sag.value / depth; tri.cssDynamic.innerHTML = ` * { transform: translateZ(${gap}px) rotateX(${sag}rad); transform-style: preserve-3d; transition: transform 1s; outline: 1px solid rgba(0, 0, 0, 0.0625); ${tri.flo.checked ?%20%22overflow:%20visible%20!important;%22%20:%20%22%22}%20}%20*:hover%20{%20transform:%20translateZ(${gap%20*%202}px)%20rotateX(${sag%20*%202}rad);%20${!tri.flo.checked%20?%20%22overflow:%20visible;%22%20:%20%22%22}%20}%20`;%20}%20},%20toggle:%20function()%20{%20if%20(tri.menu.className%20==%20%22active%22)%20{%20tri.menu.removeAttribute(%22class%22);%20}%20else%20{%20tri.menu.className%20=%20%22active%22;%20}%20},%20quit:%20function()%20{%20window.removeEventListener(%22deviceorientation%22,%20tri.gyroMove);%20window.removeEventListener(%22mousemove%22,%20tri.mouseMove);%20window.removeEventListener(%22scroll%22,%20tri.updateOrigin);%20window.addEventListener(%22resize%22,%20tri.updateOrigin);%20tri.menu.remove();%20tri.cssStatic.remove();%20tri.cssDynamic.remove();%20document.body.removeAttribute(%22style%22);%20},%20newRange:%20function(e,%20label,%20min,%20step,%20max,%20value,%20f)%20{%20tri.menu.appendChild(e);%20e.type%20=%20%22range%22;%20e.min%20=%20min;%20e.max%20=%20max;%20e.step%20=%20step;%20e.value%20=%20value;%20e.addEventListener(%22input%22,%20f);%20tri.menu.appendChild(document.createElement(%22span%22)).innerHTML%20=%20label;%20tri.menu.appendChild(document.createElement(%22br%22));%20},%20newCheckbox:%20function(e,%20label,%20f)%20{%20tri.menu.appendChild(e);%20e.type%20=%20%22checkbox%22;%20e.addEventListener(%22click%22,%20f);%20tri.menu.appendChild(document.createElement(%22span%22)).innerHTML%20=%20label;%20tri.menu.appendChild(document.createElement(%22br%22));%20},%20newButton:%20function(e,%20label,%20f)%20{%20tri.menu.appendChild(e);%20e.type%20=%20%22button%22;%20e.value%20=%20label;%20e.addEventListener(%22click%22,%20f);%20},%20init:%20function()%20{%20document.body.parentNode.appendChild(tri.menu).id%20=%20%22tri-menu%22;%20tri.newRange(tri.limit,%20%22limit%22,%200,%200.03125,%201,%200.125,%20tri.updateBody);%20tri.newRange(tri.gap,%20%22gap%20/%20distance%22,%200,%2032,%20512,%20128,%20function()%20{%20tri.updateCSS();%20tri.updateBody();%20});%20tri.newRange(tri.sag,%20%22sag%22,%20-0.25,%200.03125,%200.25,%200,%20tri.updateCSS);%20tri.newRange(tri.fov,%20%22field%20of%20view%22,%207,%201,%2013,%2010,%20tri.updateBody);%20tri.newCheckbox(tri.flo,%20%22force%20overflow%22,%20tri.updateCSS);%20tri.flo.setAttribute(%22checked%22,%20%22%22);%20tri.newCheckbox(tri.off,%20%22flatten%20layers%22,%20tri.updateCSS);%20tri.newCheckbox(tri.non,%20%22flatten%20everything%22,%20tri.updateCSS);%20tri.newButton(tri.end,%20%22Quit%22,%20tri.quit);%20tri.newButton(tri.tgl,%20%22%E2%89%A1%22,%20tri.toggle);%20tri.tgl.id%20=%20%22tri-toggle%22;%20tri.menu.appendChild(tri.cssStatic).innerHTML%20=%20`%20html,%20body%20{%20transition-property:%20none;%20height:%20100%;%20width:%20100%;%20}%20html,%20html:hover,%20#tri-menu,%20#tri-menu%20%3E%20*,%20#tri-menu%20%3E%20*:hover%20{%20transform:%20none;%20outline:%20none;%20overflow:%20auto%20!important;%20float:%20none;%20}%20#tri-menu%20{%20position:%20fixed;%20top:%200;%20left:%200;%20background:%20rgba(0,%200,%200,%200.5);%20color:%20white;%20border:%201px%20solid%20rgba(255,%20255,%20255,%200.5);;%20border-radius:%200%200%2016px%200;%20padding:%208px;%20transform:%20translate(-100%,%20-100%)%20translate(32px,%2032px);%20}%20#tri-menu.active%20{%20transform:%20none;%20}%20#tri-toggle%20{%20position:%20absolute;%20bottom:%200;%20right:%200;%20height:%2032px;%20width:%2032px;%20background:%20transparent;%20color:%20white;%20border:%20none;%20cursor:%20pointer;%20}%20#tri-menu.active%20%3E%20#tri-toggle%20{%20background:%20white;%20color:%20black;%20border-radius:%208px%200%200%200;%20}%20%60;%20tri.menu.appendChild(tri.cssDynamic);%20tri.updateCSS();%20window.addEventListener(%22deviceorientation%22,%20tri.gyroMove);%20window.addEventListener(%22mousemove%22,%20tri.mouseMove);%20window.addEventListener(%22scroll%22,%20tri.updateOrigin);%20window.addEventListener(%22resize%22,%20tri.updateOrigin);%20window.scrollBy(0,%201);%20}%20};%20tri.init();%20})();