本文详解如何通过调整 `transform: translate3d()` 的 x 轴偏移值，安全、可控地增大或减小纯 css 实现的 3d 图片轮播图中各幻灯片之间的视觉间距，避免破坏原有布局与交互逻辑。
在基于 CSS translate3d() 构建的 3D 轮播组件（如 CodePen 示例）中，图片并非通过 margin 或 gap 排列，而是依靠三维空间中的 X 轴位移 实现错落排布。因此，调整间距的核心在于修改 translate3d(x, y, z) 的第一个参数 —— 水平方向（X 轴）的百分比偏移量。
? 关键原理：X 偏移决定视觉间距
- 当前激活项（如 #im2:checked ~ #slide2）固定在中心：transform: translate3d(0%, 0, 0px)；
- 相邻项（左右各一张）默认设为 ±20%（例如 translate3d(20%, 0, -100px) 和 translate3d(-20%, 0, -100px)）；
- 次相邻项（再外侧）默认为 ±40%；
- 间距与 X 值成正比：将 20%/40% 改为 30%/60%，间距即扩大 1.5 倍；改为 25%/50% 则适度增强，且保持对称性。
✅ 正确做法：仅修改 translate3d() 的第一个值（X），保持 Y=0、Z 值不变，确保深度层次（Z）和垂直对齐（Y）不受影响。
✅ 实操示例：将间距从 20%/40% 提升至 30%/60%
/* 原有（紧凑间距） */
#im1:checked~#slide2 { transform: translate3d(20%, 0, -100px); }
#im1:checked~#slide3 { transform: translate3d(40%, 0, -250px); }
#im1:checked~#slide5 { transform: translate3d(-20%, 0, -100px); }
#im1:checked~#slide4 { transform: translate3d(-40%, 0, -250px); }
/* 修改后（宽松间距）→ 仅调大 X 值，比例保持 1:2 */
#im1:checked~#slide2 { transform: translate3d(30%, 0, -100px); }
#im1:checked~#slide3 { transform: translate3d(60%, 0, -250px); }
#im1:checked~#slide5 { transform: translate3d(-30%, 0, -100px); }
#im1:checked~#slide4 { transform: translate3d(-60%, 0, -250px); }⚠️ 注意事项与最佳实践
- 严格保持对称性：左/右对应项的 X 值必须互为相反数（如 +30% / -30%），否则轮播出现视觉失衡；
- Z 值需阶梯式递增：越远的图片 Z 值应更负（如 -100px, -250px），以强化 3D 深度感，切勿随意改动；
- 避免使用 margin 或 padding：该轮播依赖绝对定位 + 3D 变换，添加盒模型间距会破坏 position: absolute 的层叠逻辑；
- 响应式兼容提示：X 值推荐使用 %（相对父容器宽度）而非 px，确保在不同屏幕下间距比例一致；
- 过渡平滑性：所有 transform 均已声明 transition: transform 500ms ease，无需额外设置。
? 总结
调控此类 CSS 3D 轮播图的图片间距，本质是精确操控三维空间中的水平位移量。只需聚焦 translate3d(X%, 0, Zpx) 中的 X% 参数，按需放大（如 20% → 35%）或缩小（如 20% → 15%），并同步更新所有关联选择器，即可实现无损、可预测的间距调整。记住：改 X，不动 Y/Z；保对称，不碰 margin；用百分比，适配更稳健。
