当使用 `transform` 实现轮播动画时，若子元素超出容器边界却未被裁剪，只需在**外层容器**（而非动画元素本身）上设置 `overflow: hidden` 即可有效隐藏溢出内容。
在您提供的代码中，.carroussel-pelis 是执行动画的元素，而 .carroussel-container 是其直接父容器。关键点在于：overflow: hidden 必须作用于包含动画元素的、具有明确尺寸和定位上下文的祖先容器——因为 transform 不会触发新的层叠上下文或块格式化上下文，若仅在动画元素自身设置 overflow: hidden，浏览器通常会忽略该声明（尤其在 display: flex + transform 组合下）。
✅ 正确做法是将 overflow: hidden 移至外层容器：
.carroussel-container {
width: 100%;
overflow: hidden; /* ✅ 关键修复：加在这里 */
position: relative; /* 推荐添加，确保裁剪边界清晰 */
}
.carroussel-pelis {
animation: carousel 100s linear infinite;
display: flex;
flex-wrap: nowrap;
width: max-content; /* 替代 100vw，避免因滚动条/视口变化导致计算偏差 */
/* 移除 overflow: hidden —— 此处无效 */
}
@keyframes carousel {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-880px); /* 建议改用 translateX 而非 translate3d，更语义化 */
}
100% {
transform: translateX(0);
}
}⚠️ 注意事项：
- 不要依赖 width: 100vw 作为 .carroussel-pelis 的宽度，它可能因垂直滚动条存在而略大于可视区域；推荐使用 width: max-content 或精确计算总宽度（如 6 * 250px + 5 * 20px = 1600px）；
- 确保 .carroussel-container 有明确的 height 或内部高度撑开（必要时设 min-height: 350px），否则可能出现高度塌陷；
- 若需兼容旧版 Safari，可补充 -webkit-transform 和 -webkit-animation 前缀；
- 动画中 translate3d(0, 0, 0) 可提升渲染性能，但 translateX() 在现代浏览器中已足够高效且更易维护。
总结：溢出控制的本质是「裁剪上下文」的建立——只有设置了 overflow: hidden 且具备布局约束（如 position: relative）的祖先容器，才能可靠地截断其内部经 transform 位移后越界的子元素。
立即学习“前端免费学习笔记（深入）”；
