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

README.md

The original and fork did not work in Brave. Every year we stray further from the light of 3D visualized DOMs. Use the new modified,minified, and fixified code below.

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.

tilt3D.js

javascript:void%20function(){(function(){var%20threeDeeBG=window.getComputedStyle(document.body,null).getPropertyValue(%22background-color%22).match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);threeDeeBG||(threeDeeBG=[%22%22,%22160%22,%22160%22,%22160%22]);var%20threeDeeDarken=(threeDeeBG[1]+threeDeeBG[2]+threeDeeBG[3])/3%3E128;threeDeeBG[1]-=threeDeeDarken%3F60:-60,threeDeeBG[2]-=threeDeeDarken%3F60:-60,threeDeeBG[3]-=threeDeeDarken%3F60:-60,threeDeeBG=%60rgba(${threeDeeBG[1]},${threeDeeBG[2]},${threeDeeBG[3]},%200.8)%60,sheet=new%20CSSStyleSheet,document.adoptedStyleSheets=[sheet],sheet.insertRule(%60*{border:%201px%20solid%20${threeDeeBG};%20box-shadow:%20-3px%20-3px%201px%201px%20${threeDeeBG},%20-2px%20-2px%200%200%20${threeDeeBG};%20padding:%205px%200%200%205px;%20box-sizing:%20border-box;%20margin:%203px;}%60),sheet.insertRule(%22body{transform:%20rotate3d(-1,%201,%200,%2015deg);%20transition:%20transform%200.5s;}%22)})()}();