当使用 transform: translate() 实现图片轮播时，若内部图片超出父容器边界仍可见，只需为容器添加 overflow: hidden 即可裁剪溢出内容，确保仅显示在指定区域内的图像。
当使用 `transform: translate()` 实现图片轮播时，若内部图片超出父容器边界仍可见，只需为容器添加 `overflow: hidden` 協即可裁剪溢出内容，确保仅显示在指定区域内的图像。
在构建基于 CSS transform 的图片滑动器（如横向轮播）时，一个常见问题是：尽管通过 translateX() 移动了内部图片容器，但图片仍会“溢出”到外层容器（如 #pics-div）可视区域之外——这不仅破坏布局，还影响用户体验。
根本原因在于：CSS transform 不改变文档流，也不触发溢出裁剪。即使子元素被平移出父容器范围，只要父容器未明确设置溢出处理策略，浏览器默认会将其完整渲染（即 overflow: visible）。
✅ 正确解法是为滑动容器（即承载所有图片的直接父级 <div id="pics-div">）显式声明：
#pics-div {
width: 700px;
height: 400px;
margin-top: 50px;
overflow: hidden; /* ? 关键声明：隐藏超出边界的全部内容 */
}overflow: hidden 会强制浏览器将该元素的 padding box（内边距区域）作为裁剪边界，任何超出此区域的子元素（包括经 transform 位移后的图片）都将被视觉截断，从而实现“只显示容器内部分”的预期效果。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
? 注意事项：
- 确保 overflow: hidden 应用于直接包裹滑动内容的容器（本例中是 #pics-div），而非更外层的 flex 容器；
- 避免在该容器上设置 border-radius 同时依赖 overflow: hidden 实现圆角裁剪（部分旧版 Safari 存在兼容性问题，建议配合 -webkit-mask 或 clip-path 增强鲁棒性）；
- 若后续需支持触控拖拽或动画过渡，overflow: hidden 与 transform 完全兼容，不会影响性能或渲染逻辑。
完整结构示例（含关键样式）：
<h3>Image slider</h3>
<div style="display: flex; align-items: center;">
<div id="left-btn" style="cursor: pointer;">L</div>
<div id="pics-div" style="width: 700px; height: 400px; margin-top: 50px; overflow: hidden;">
<div style="display: flex; transition: transform 0.3s ease-in-out;">
<img src="https://shorturl.at/chBHM" alt="Red trees" width="700" height="400">
<img src="https://shorturl.at/aAEX5" alt="Winter house" width="700" height="400">
</div>
</div>
<div id="right-btn" style="cursor: pointer;">R</div>
</div>? 提示：overflow: hidden 是纯 CSS 解决方案，无需 JavaScript 干预，轻量、高效且语义清晰。它是现代轮播组件中实现“视窗裁剪”的基石属性——掌握它，是构建可控、专业级 UI 动画的第一步。
