<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.card-mask {
width: 300px;
height: 500px;
perspective: 600px;
margin: 50px;
}
.card {
height:100%;
outline: 4px solid;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="card-mask">
<div class="card"></div>
</div>
<script>
const cardMask = document.querySelector(".card-mask");
const card = document.querySelector(".card");
cardMask.addEventListener("mousemove", (e) => {
let { clientX: s, clientY: n } = e,
{
width: i,
height: r,
x: o,
y: l,
} = cardMask.getBoundingClientRect(),
c = {
x: 15 - (Math.abs(n - l) / r) * 30,
y: -15 + (Math.abs(s - o) / i) * 30,
};
card.style.transform = "rotateX("
.concat(c.x, "deg) rotateY(")
.concat(c.y, "deg)");
});
</script>
</body>
</html>