Tiny js code that will simulate a 3D view of your elements, like firefox used to do.

README.md

Explanations

This script will get the computed background color of your body, and then will create shadows darker than your background (if you have a light background), or lighter than your background (if you have a dark background). If the body does not have a background, the script will take 160 as the default value for red, green and blue.

It will then add a border, a box-shadow, a padding and a margin to each element of your page, and will use the cool rotate3d css function to tilt your website.

Install

Follow these steps to make it work on any website:

1. Create a new bookmark
2. Paste the code inside location
3. Visit a website
4. Click on the bookmark

Or remove the javascript: part and paste the code into your JS console.

Demo

Watch this video for a quick demo.

tilt.js

javascript:(function(){
	let bgcolor = window.getComputedStyle(document.body, null).getPropertyValue("background-color").match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
	if(!bgcolor)
		bgcolor = ["", "160", "160", "160"];
	let darken = (bgcolor[1] + bgcolor[2] + bgcolor[3])/3 > 128;
	bgcolor[1] -= darken ? 60 : -60;
	bgcolor[2] -= darken ? 60 : -60;
	bgcolor[3] -= darken ? 60 : -60;
	bgcolor = `rgba(${bgcolor[1]},${bgcolor[2]},${bgcolor[3]}, 0.8)`;
	
	sheet = new CSSStyleSheet()
	document.adoptedStyleSheets = [sheet];
	sheet.insertRule(`*{border: 1px solid ${bgcolor}; box-shadow: -3px -3px 1px 1px ${bgcolor}, -2px -2px 0 0 ${bgcolor}; padding: 5px 0 0 5px; box-sizing: border-box; margin: 3px;}`);
	sheet.insertRule('body{transform: rotate3d(-1, 1, 0, 15deg); transition: transform 0.5s;}');
})();

I minified and urlencoded it in order to make it work as a bookmarklet in Brave, works in chrome too, it was only working as a paste into the console.
https://gist.github.com/cherrerajobs/ec7fc92a30bfd2bb3ba753454669a605