JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="rotate">
    <h1>Test</h1>
</div>
<div class="rotate">
    <h1>Test</h1>
</div>
<div class="rotate">
    <h1>Test</h1>
</div>
<div class="rotate">
    <h1>Test</h1>
</div>
<div class="rotate">
    <h1>Test</h1>
</div>

CSS

body {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.rotate {
    background:red;
    transform-origin: center;
    transform: rotateX(5deg);
}

JavaScript

document.addEventListener("mousemove", function(e) {
    requestAnimationFrame(move3d.bind(e));
});

function move3d() {
    let x = this.clientX;
    let y = this.clientY;
    
    let rx = (window.innerHeight / 2 - y) / 10;
    let ry = (window.innerWidth / 2 - x) / 40;
    Array.prototype.forEach.call(document.querySelectorAll(".rotate"), function(m) {
		m.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg)`;
    });
}

console.clear();