JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

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

CSS

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

.rotate {
    background: #000;
    transform-origin: center;
    width: calc(100% / 5);
    height: 100px;
    display: inline-block;
    opacity: 0.5;
}

JavaScript

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

function move3d() {
    let x = this.pageX;
    let y = this.pageY;
    Array.prototype.forEach.call(document.querySelectorAll(".rotate"), function(m) {
        let ex = m.offsetLeft - m.offsetWidth / 2;
        let ey = m.offsetTop + m.offsetHeight / 2;
        let rx = (ey - y) / 5;
        let ry = (x - ex) / 20;
        let tz = Math.sqrt(Math.pow(ex - x, 2) + Math.pow(ey - y, 2)) / 10;
		m.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg) translateZ(${tz}px)`;
    });
}

console.clear();