前言：有趣的 3D Hover Effect 效果，通过 js 监听鼠标移动，动态赋值 rotateX，rotateY 的旋转度来实现。
效果图：
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>document</title>
<style>
body {
background: #000;
}
.card {
margin: 200px auto;
width: 400px;
border-radius: 10px;
transform: perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transition: 0.3s;
}
.card img {
width: 100%;
border-radius: inherit;
}
.card:hover {
box-shadow: -3px -3px 10px #54a29e, 3px 3px 10px #a79d66;
}
</style>
</head>
<body>
<div class="card">
<img src="img.jpg" />
</div>
<script>
const card = document.querySelector(".card");
const yRange = [-10, 10];
const xRange = [-10, 10];
function getRotateDeg(range, value, length) {
return (value / length) * (range[1] - range[0]) + range[0];
}
card.onmousemove = (e) => {
const { offsetX, offsetY } = e;
const { offsetWidth, offsetHeight } = card;
const ry = -getRotateDeg(yRange, offsetX, offsetHeight);
const rx = getRotateDeg(xRange, offsetY, offsetWidth);
card.style.setProperty("--rx", `${rx}deg`);
card.style.setProperty("--ry", `${ry}deg`);
console.log(rx, ry);
};
card.onmouseleave = () => {
card.style.setProperty("--rx", 0);
card.style.setProperty("--ry", 0);
};
</script>
</body>
</html>
