Random Rotate and Translate Page

Today I am going to explain how you can make any page randomly translate and rotate in any browser.

Steps -

First, go to the page on the browser that you want to randomly translate and rotate.
Now on page right-click and select Inspect.

You are going to see a new pop-up window within the browser which is overlayed on the webpage. This window shows you the code that is being used on the page.
Now go to the Source tab in the pop-up window and create a new script snippet.
Copy the given code and run the script by pressing Ctrl + Enter.

const sheet = new CSSStyleSheet();
sheet.replaceSync('* {transition: all 2s}');
document.adoptedStyleSheets = [sheet];

const allElements = document.body.children;

setInterval(() => {
    for(let el of allElements){
        const rotation = Math.floor(Math.random() * 360);
        const x = Math.floor(document.body.clientWidth * Math.random());
        const y = Math.floor(document.body.clientHeight * Math.random());
        el.style.transform = `translate(${x}px,${y}px) rotate(${rotation}deg)`;
    }
}, 2000)

Understand the Code -

I firstly created a CSS stylesheet within the snippet and set up the time of translation as 2 seconds.
After that, I fetched the children of the body and store them in a variable.
Then I used the setInterval method and for all the children, set a random rotation and translation. I also used 2000 ms to transform the elements again.
The clientWidth and clientHeight are used to fetch the Width and Height of the screen.