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 page on browser that you want to randomly translate and rotate.
Now on page right click and select Inspect.

You are going to see a new window pop up within the browser which is overlayed on the webpage. This windows shows you the code that is being used in the page.
Now go to Source tab 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 Code -

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

GitHub Link for the code -

Code Link

Random Rotate and Translate Page

Contact Form