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

README.md

update

This fork by rebane2001 is an improved version of the script!

---

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

Demo

Watch this video for a quick demo.

Warning

This script will not work with cors stylesheets, like the one on codepen. You will get this error:

tilt.js

javascript:(function(){
	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"];
	if((bgcolor[1] + bgcolor[2] + bgcolor[3])/3 > 128){
		bgcolor[1] -= 60;
		bgcolor[2] -= 60;
		bgcolor[3] -= 60;
	}else{
	bgcolor[1] += 60;
	bgcolor[2] += 60;
	bgcolor[3] += 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;}');})();

Love it - while I dont do much webdev I loved this feature of firefox and I am sad to see it go for no clear reason, thanks for putting this together!

You're welcome @ConstantineK!
Thank you for taking the time to send this comment :)

Hey, I forked your code and made it use adoptedStyleSheets instead of overwriting existing ones. This makes it compatible with more sites (eg Codepen). Feel free to copy the code back from my fork if you wish!

Thanks @rebane2001!

I added a link to your fork at the top of the readme!