当对含 background-image 的元素使用 scaleX(0) 时，图像可能脱离容器、堆叠于父容器左上角——根本原因在于缩放未约束渲染边界，需通过 overflow: hidden 或明确的定位上下文修复。
当对含 `background-image` 的元素使用 `transform: scalex(0)` 时，图像可能脱离容器、堆叠于父容器左上角——根本原因在于缩放未约束渲染边界，需通过 `overflow: hidden` 或明确的定位上下文修复。
在 CSS 动画与交互开发中，transform: scaleX(0) 是实现“抽屉式”图片预览的常用技巧：初始隐藏右侧预览图，悬停 .project 时将其水平展开（scaleX(1)）。但如你所遇，最后一张图随机出现在容器左上角，并非渲染错乱，而是典型的 视觉溢出（visual overflow）问题。
? 问题根源分析
transform 属于合成层变换，它不改变文档流，也不触发新的包含块（containing block）。当 .project .img 设置了：
.project .img {
transform: scaleX(0);
background: url(...);
background-size: contain;
}
虽然视觉上宽度被压缩为 0，但其 background-image 仍按原始尺寸渲染，并因 scaleX(0) 导致坐标系坍缩——此时浏览器会将该背景图的“渲染锚点”回退到最近的具有定位上下文（positioned ancestor）的祖先元素。而你的 .projects 容器虽有 position: relative，但 .project 本身默认是 static，不构成独立定位上下文；因此所有 .img 的背景图实际共享同一个渲染参考点（即 .projects 的左上角），造成多张图在顶部重叠堆栈。
✅ 验证方式：在 DevTools 中临时为 .project 添加 position: relative，或为 .img 添加 overflow: hidden，异常立即消失。
✅ 推荐修复方案（二选一）
方案一（推荐）：为 .img 添加 overflow: hidden
.project .img {
position: relative;
transform: scaleX(0);
transition: 0.3s ease;
height: 100px;
width: 200px;
overflow: hidden; /* ← 关键修复：裁剪超出边界的背景渲染 */
transform-origin: right;
background-size: contain;
background-repeat: no-repeat;
background-position: center right;
}
✅ 优势：语义清晰、无需改动布局结构、兼容性好（全现代浏览器支持）
⚠️ 注意：若未来需在 .img 内添加浮动/绝对定位子元素，请确保其 z-index 和定位逻辑与 overflow: hidden 兼容。
方案二：为 .project 显式创建定位上下文
.project {
position: relative; /* ← 新增：使每个 .img 以自身为定位参考 */
/* 其余原有样式保持不变 */
}
✅ 优势：更符合 BEM/组件化思维，隔离各项目渲染环境
⚠️ 注意：若 .project 已有其他 position: absolute 子元素，需检查层级是否受影响。
? 补充验证建议
- 移除 animation-timeline: scroll(root block) 后问题是否仍存在？→ 实际上该属性与此问题无关（它仅控制 @keyframes expand 的触发时机），可放心保留。
- 检查 background-image 是否设置了 background-position: left 或 top？→ 建议统一设为 center right，确保缩放后图像始终锚定右侧。
? 总结
| 现象 | 原因 | 解决 |
|---|---|---|
| .img 背景图飞出到左上角 | scaleX(0) 不阻断背景渲染，且缺少定位上下文或溢出裁剪 | ✅ .img { overflow: hidden } 或 ✅ .project { position: relative } |
这不是浏览器 Bug，而是 CSS 渲染规范的预期行为。掌握 transform 与 overflow、position 的协同关系，能帮你快速定位并解决类似“视觉漂移”类问题。
