用CSS的transform: rotate()配合JavaScript监听鼠标移动事件可实现图片随鼠标实时3D旋转，核心是计算鼠标相对图片中心的偏移并转换为rotateX/rotateY角度值，再动态更新样式。
用CSS的transform: rotate()配合JavaScript监听鼠标移动事件，就能让图片随鼠标位置实时旋转。核心思路是：获取鼠标相对于图片中心的坐标偏移，换算成角度值，再动态更新图片的旋转角度。
基础HTML结构
先准备一个图片容器，确保图片有明确的定位上下文：
CSS设置关键样式
让图片可定位、居中，并启用硬件加速提升动画流畅度：
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
}
#rotator img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.05s ease-out;
transform-origin: center;
backface-visibility: hidden;
}
JavaScript计算并应用旋转角度
监听mousemove事件，根据鼠标在容器内的X/Y偏移量生成旋转方向和幅度：
const img = rotator.querySelector('img');
rotator.addEventListener('mousemove', (e) => {
const rect = rotator.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
// 计算鼠标相对中心的偏移（-1 到 1 范围）
const x = (e.clientX - centerX) / (rect.width / 2);
const y = (e.clientY - centerY) / (rect.height / 2);
// 转为旋转角度（±20°以内更自然）
const rotateX = y * -20;
const rotateY = x * 20;
img.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
// 可选：鼠标离开时复位
rotator.addEventListener('mouseleave', () => {
img.style.transform = 'rotateX(0deg) rotateY(0deg)';
});
进阶优化建议
- 使用
requestAnimationFrame替代直接在mousemove里设样式，避免高频触发卡顿 - 对旋转角度加限幅（如
Math.max(-25, Math.min(25, angle))），防止过度扭曲 - 若需3D翻转效果，确保父容器设置
perspective，例如#rotator { perspective: 1000px; } - 移动端需额外监听
touchmove，并取touches[0]坐标
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
