<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>matrix</title> </head> <style> html, body { height: 100%; margin: 0; overflow: hidden; } body { color: white; font-family: sans-serif; font-size: 1.8em; display: flex; align-items: center; justify-content: center; } .content { margin: 1px; 140px; height: 140px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1); } </style> <body> <div class="wowpanel"> <div class="content">move</div> </div> <div class="wowpanel"> <div class="content">your</div> </div> <div class="wowpanel"> <div class="content">cursor</div> </div> <div class="wowpanel"> <div class="content">over</div> </div> </body> </html> <script> let angle = 45; let wowpanels = document.querySelectorAll(".wowpanel"); let colors = ['#4975FB', '#924DE6', '#EF5252', '#F59500']; wowpanels.forEach(function(element,i){ maxtridFun(element, colors[i]); }); function maxtridFun(panel, color) { let content = panel.querySelector(".content"); content.style.backgroundColor = color; panel.addEventListener('mouseout',function(e){ content.style.transform = `perspective(300px) rotateY(0deg) rotateX(0deg)`; }); panel.addEventListener('mousemove', function(e){ let w = panel.clientWidth, h = panel.clientHeight, y = (e.offsetX - w * 0.5) / w * angle, x = (1 - (e.offsetY - h * 0.5)) / h * angle; content.style.transform = `perspective(300px) rotateX(${x}deg) rotateY(${y}deg)`; }); } </script>