本文详解如何实现盒子整体 3D 旋转并跟随鼠标光标投射动态聚光灯效果，重点解决因 overflow: hidden 导致的旋转截断问题，确保盒子作为统一三维物体自然朝向用户。
本文详解如何实现盒子整体 3d 旋转并跟随鼠标光标投射动态聚光灯效果，重点解决因 `overflow: hidden` 导致的旋转截断问题，确保盒子作为统一三维物体自然朝向用户。
要让 .box 在悬停时呈现真实、连贯的 3D 空间旋转（即整个矩形作为一个刚体绕 X/Y 轴倾斜，模拟“朝向用户”的深度感），关键在于保留其 3D 变换所需的视觉空间余量。你当前代码中的核心逻辑（rotateX/rotateY 计算、光标定位）本身是正确的，但 .container { overflow: hidden } 成为了隐形障碍——它会强制裁剪所有超出容器边界的像素，而 3D 旋转后的 .box 四角会自然伸出原始边界（尤其在大角度或靠近边缘悬停时），导致视觉撕裂、形变或局部消失。
✅ 正确做法：移除 .container 的 overflow: hidden
这是最直接、最有效的修复。perspective 已在容器上声明，.box 的 transform-style: preserve-3d（虽未显式写出，但现代浏览器对 transform 的 3D 值默认支持）已就绪，只需保证父容器不强行裁剪：
.container {
position: relative;
width: 600px;
height: 400px;
perspective: 800px; /* 必须保留，定义 3D 视角距离 */
/* ❌ 删除这一行：overflow: hidden; */
}同时，为增强视觉真实感与性能，建议补充以下 CSS 优化：
.box {
width: 100%;
height: 100%;
background-color: #0d419d;
transition: transform 0.3s ease;
position: relative;
transform-style: preserve-3d; /* 明确启用子元素 3D 上下文（虽非必需，但更健壮） */
backface-visibility: hidden; /* 消除背面闪烁，提升渲染稳定性 */
}
/* 光标聚光灯：保持原有逻辑，仅微调样式 */
.light {
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,109,50,0.4) 0%, transparent 70%);
pointer-events: none;
transform: translate(-50%, -50%);
display: none;
z-index: 1;
filter: blur(2rem); /* 略减模糊值，使光效更聚焦 */
}
.container:hover .light {
display: block;
}⚠️ 注意事项：
-
不要用纯 CSS 替代 JS 动态旋转：虽然
:hover可触发静态transform，但要实现“随鼠标位置实时计算旋转角度”（如左上角悬停 → 左上角前倾），必须依赖 JavaScript 获取clientX/clientY并动态更新transform。纯 CSS 无法读取鼠标坐标。 -
perspective的作用域：它必须设置在包含变换元素的最近父容器（即.container）上，而非.box自身；否则 3D 效果将失效。 -
性能提示：
transform和opacity是 GPU 加速属性，本方案已天然高效；避免在mousemove中触发重排（如读取offsetWidth），你当前代码中只读取getBoundingClientRect()（触发重绘但非重排），属安全实践。
最终效果：当鼠标在容器内移动时，.box 将以中心为枢轴平滑倾斜，四角同步响应——顶部悬停时整体前倾（rotateX 负值），左侧悬停时向右扭转（rotateY 负值），配合柔和的绿色聚光灯，营造出沉浸式立体交互体验。
立即学习“前端免费学习笔记（深入）”；
