<!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;
width: 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>
