当对带有 background-image 的元素应用 transform: scaleX(0) 时，若未设置恰当的定位或溢出控制，背景图可能脱离预期布局、堆叠于容器左上角——根本原因是 scaleX(0) 不会隐藏背景图像本身，且元素未建立独立的层叠上下文或裁剪边界。
当对带有 `background-image` 的元素应用 `transform: scalex(0)` 时，若未设置恰当的定位或溢出控制，背景图可能脱离预期布局、堆叠于容器左上角——根本原因是 `scalex(0)` 不会隐藏背景图像本身，且元素未建立独立的层叠上下文或裁剪边界。
这个问题看似是动画或缩放失效，实则源于 CSS 渲染层的底层机制：transform: scaleX(0) 仅对元素的内容框（content box）和边框（border box） 进行缩放，但 background-image 默认绘制在 padding box 区域，且不受 transform 的裁剪影响。当缩放值为 0 时，元素视觉宽度坍缩为 0，但背景图仍按原始尺寸渲染，并依据其所在 stacking context 定位——此时若父容器（如 .projects）设置了 position: static（默认），而更外层又缺乏明确的定位上下文，浏览器会将“不可见但存在”的背景图回退到最近的已定位祖先（或根层叠上下文）左上角进行绘制，导致所有 .img 元素的背景图重叠堆叠在页面左上角。
✅ 正确解决方案有两个等效且推荐的方式（任选其一即可）：
方案一：强制裁剪溢出（推荐）
为 .project .img 添加 overflow: hidden，使其成为独立的块格式化上下文（BFC），并裁剪所有超出其盒模型的内容（包括背景图）：
.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;
}方案二：建立独立定位上下文
为每个 .project 设置 position: relative，确保其子元素（.img）的 transform 和 background 均以其为参考系，避免“漂移”至外层容器：
.project {
position: relative; /* ? 关键修复：为 .img 提供可靠定位上下文 */
height: 15svh;
min-height: 150px;
width: 70vw;
display: flex;
margin-left: 10vw;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color3);
}⚠️ 注意事项：
- 不要依赖 visibility: hidden 或 opacity: 0 替代 overflow: hidden —— 它们不阻止背景图渲染位置偏移；
- 移除冗余的重复 transition 声明（当前 CSS 中 .project .img 有两处 transition），避免行为不可预测；
- animation-timeline: scroll(root block) 与本问题无直接关联，它仅控制 @keyframes expand 的触发时机，不影响 scaleX(0) 的渲染表现；可放心保留；
- 若后续需支持 Safari，注意 animation-timeline 属于实验性特性，生产环境建议配合 @supports 或降级方案。
? 总结：transform: scaleX(0) 并非“隐藏”，而是“压缩”。要真正约束视觉输出，必须配合 overflow: hidden 或明确的定位上下文。这是现代 CSS 中处理缩放+背景图组合时的关键实践原则。
