3d website
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 ? "overflow: visible !important;" : ""} } *:hover { transform: translateZ(${gap * 2}px) rotateX(${sag * 2}rad); ${!tri.flo.checked ? "overflow: visible;" : ""} } `; } }, toggle: function() { if (tri.menu.className == "active") { tri.menu.removeAttribute("class"); } else { tri.menu.className = "active"; } }, quit: function() { window.removeEventListener("deviceorientation", tri.gyroMove); window.removeEventListener("mousemove", tri.mouseMove); window.removeEventListener("scroll", tri.updateOrigin); window.addEventListener("resize", tri.updateOrigin); tri.menu.remove(); tri.cssStatic.remove(); tri.cssDynamic.remove(); document.body.removeAttribute("style"); }, newRange: function(e, label, min, step, max, value, f) { tri.menu.appendChild(e); e.type = "range"; e.min = min; e.max = max; e.step = step; e.value = value; e.addEventListener("input", f); tri.menu.appendChild(document.createElement("span")).innerHTML = label; tri.menu.appendChild(document.createElement("br")); }, newCheckbox: function(e, label, f) { tri.menu.appendChild(e); e.type = "checkbox"; e.addEventListener("click", f); tri.menu.appendChild(document.createElement("span")).innerHTML = label; tri.menu.appendChild(document.createElement("br")); }, newButton: function(e, label, f) { tri.menu.appendChild(e); e.type = "button"; e.value = label; e.addEventListener("click", f); }, init: function() { document.body.parentNode.appendChild(tri.menu).id = "tri-menu"; tri.newRange(tri.limit, "limit", 0, 0.03125, 1, 0.125, tri.updateBody); tri.newRange(tri.gap, "gap / distance", 0, 32, 512, 128, function() { tri.updateCSS(); tri.updateBody(); }); tri.newRange(tri.sag, "sag", -0.25, 0.03125, 0.25, 0, tri.updateCSS); tri.newRange(tri.fov, "field of view", 7, 1, 13, 10, tri.updateBody); tri.newCheckbox(tri.flo, "force overflow", tri.updateCSS); tri.flo.setAttribute("checked", ""); tri.newCheckbox(tri.off, "flatten layers", tri.updateCSS); tri.newCheckbox(tri.non, "flatten everything", tri.updateCSS); tri.newButton(tri.end, "Quit", tri.quit); tri.newButton(tri.tgl, "≡", tri.toggle); tri.tgl.id = "tri-toggle"; tri.menu.appendChild(tri.cssStatic).innerHTML = ` html, body { transition-property: none; height: 100%; width: 100%; } html, html:hover, #tri-menu, #tri-menu > *, #tri-menu > *:hover { transform: none; outline: none; overflow: auto !important; float: none; } #tri-menu { position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); color: white; border: 1px solid rgba(255, 255, 255, 0.5);; border-radius: 0 0 16px 0; padding: 8px; transform: translate(-100%, -100%) translate(32px, 32px); } #tri-menu.active { transform: none; } #tri-toggle { position: absolute; bottom: 0; right: 0; height: 32px; width: 32px; background: transparent; color: white; border: none; cursor: pointer; } #tri-menu.active > #tri-toggle { background: white; color: black; border-radius: 8px 0 0 0; } %60; tri.menu.appendChild(tri.cssDynamic); tri.updateCSS(); window.addEventListener("deviceorientation", tri.gyroMove); window.addEventListener("mousemove", tri.mouseMove); window.addEventListener("scroll", tri.updateOrigin); window.addEventListener("resize", tri.updateOrigin); window.scrollBy(0, 1); } }; tri.init(); })();
black hole
javascript: (function() {    var x = document.getElementsByTagName("*");    for (i = 0; i < x.length; i++) {        x[i].style.position = "absolute";        x[i].style.top = "50%";        x[i].style.left = "50%";        x[i].style.transition = "5s";        x[i].style.transform = "translate(-50%, -50%)"    }}());