当对包含滚动内容的元素直接应用 matrix3d 等 3D 变换时，浏览器可能因坐标系重映射而丢失滚动事件响应能力；解决方案是将变换与滚动容器分离，确保 overflow-y: auto/scroll 应用于未被变换（或仅作恒等变换）的独立容器。
当对包含滚动内容的元素直接应用 `matrix3d` 等 3d 变换时，浏览器可能因坐标系重映射而丢失滚动事件响应能力；解决方案是将变换与滚动容器分离，确保 `overflow-y: auto/scroll` 应用于未被变换（或仅作恒等变换）的独立容器。
在使用 Three.js 的 CSS3DRenderer 或类似 3D CSS 渲染库时，常见场景是：内容需保持 3D 空间姿态（通过 transform-style: preserve-3d 和 matrix3d 实现），但内部又需支持原生滚动（如长文本、列表）。此时若将 overflow-y: scroll 直接设在被深度变换的元素（如 .page）上，滚动会失效——并非样式未生效，而是浏览器无法正确将指针/触控事件映射到变形后的滚动区域，尤其当 transform 包含 translateZ()、非单位缩放或倾斜时，会触发合成层隔离并干扰事件传递链。
✅ 正确做法是「分层解耦」：
- 外层负责 3D 定位（
.transform-wrapper），应用perspective和父级matrix3d； - 内层专注滚动行为（
.scrollable-content），不参与 3D 变换逻辑，仅保留overflow-y: auto和必要尺寸约束； - 关键技巧：为
.scrollable-content显式设置transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)（即恒等矩阵），既满足父级preserve-3d的子元素要求，又避免引入副作用变换。
以下是可直接运行的最小化示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling with Transformation</title>
<style>
body, html {
height: 100%;
margin: 0;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.transform-wrapper {
width: 300px;
height: 300px;
perspective: 1000px;
/* 模拟 library 生成的 3D 变换（仅作用于 wrapper） */
transform: rotateX(15deg) rotateY(-10deg) translateZ(200px);
}
.scrollable-content {
width: 100%;
height: 100%;
overflow-y: auto;
background: #f8f9fa;
padding: 16px;
box-sizing: border-box;
/* 必须存在，否则在 preserve-3d 环境中可能被错误提升图层 */
transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
/* 可选：启用平滑滚动 */
scroll-behavior: smooth;
}
.scrollable-content p {
margin: 0 0 12px 0;
line-height: 1.6;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="transform-wrapper">
<div class="scrollable-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis.</p>
</div>
</div>
</div>
</body>
</html>⚠️ 注意事项：
-
禁止在
.scrollable-content上叠加额外transform（如translateY()或scale()），否则会再次破坏滚动事件捕获； - 若需动态更新 3D 姿态，请仅修改
.transform-wrapper的transform，保持.scrollable-content的transform恒为单位矩阵； - 在移动端，建议添加
touch-action: auto到.scrollable-content以确保触控滚动生效； - 如仍遇到滚动卡顿，可在
.scrollable-content中添加will-change: scroll-position（谨慎使用，仅在必要时）。
该方案兼容所有现代浏览器（Chrome 61+、Firefox 63+、Safari 15.4+），且完全适配 Three.js CSS3DObject 的输出结构——你无需修改库生成的外层变换逻辑，只需将实际滚动内容包裹进一个干净、无副作用的子容器即可。
