如何精准调控 CSS 3D 轮播图中图片之间的间距

在 CSS 3D 轮播图的实现中，图片之间的间距是否均匀直接影响视觉体验和交互手感。间距的本质是由每张图片绕 Y 轴旋转的角度以及沿 Z 轴向外平移的距离共同决定的，我们只要理清这两个变量的数学关系，就能精准调控。

一、3D 轮播图的基础结构

通常我们会把一个容器设为 transform-style: preserve-3d，内部若干张图片绝对定位重叠在一起，然后通过脚本或样式为每张图设置不同的 rotateY 和 translateZ。

<div class="stage">
  <div class="carousel">
    <img src="https://ipipp.com/a.jpg" class="item">
    <img src="https://ipipp.com/b.jpg" class="item">
    <img src="https://ipipp.com/c.jpg" class="item">
  </div>
</div>

二、间距的核心计算公式

假设轮播图共有 n 张图片，那么每张图片绕 Y 轴的旋转角度应为 360deg / n。为了让图片边缘恰好相接且不重叠，translateZ 的距离 tz 可由图片宽度 w 推导：

tz = (w / 2) / Math.tan(Math.PI / n)

这个公式表示，把图片当作正 n 棱柱的一个侧面，从中心推开的距离就是上述值。若希望图片间留出空隙，只需在 w 的基础上加上间距 gap，即用 w + gap 替代原宽度参与计算。

示例：5 张图，宽度 200px，间距 20px

const n = 5;
const w = 200;
const gap = 20;
const tz = ((w + gap) / 2) / Math.tan(Math.PI / n);
// tz 约为 138.3px

对应的 CSS 设置

.carousel .item:nth-child(1) { transform: rotateY(0deg) translateZ(138.3px); }
.carousel .item:nth-child(2) { transform: rotateY(72deg) translateZ(138.3px); }
.carousel .item:nth-child(3) { transform: rotateY(144deg) translateZ(138.3px); }
.carousel .item:nth-child(4) { transform: rotateY(216deg) translateZ(138.3px); }
.carousel .item:nth-child(5) { transform: rotateY(288deg) translateZ(138.3px); }

三、用 perspective 优化视觉间距

父容器添加 perspective 会改变景深。数值越小，3D 畸变越强，间距看起来更疏离；数值越大越接近平面。一般设为轮播图宽度的 2 到 3 倍较为自然。

.stage {
  perspective: 1000px;
}
.carousel {
  transform-style: preserve-3d;
  position: relative;
  width: 200px;
  height: 120px;
  margin: 0 auto;
}
.item {
  position: absolute;
  width: 200px;
  left: 0;
  top: 0;
}

四、动态生成样式的小技巧

当图片数量变化频繁时，可用 JavaScript 动态写入样式，避免手工计算失误。

function buildCarousel(items, w, gap) {
  const n = items.length;
  const tz = ((w + gap) / 2) / Math.tan(Math.PI / n);
  items.forEach((el, i) => {
    const deg = 360 / n * i;
    el.style.transform = `rotateY(${deg}deg) translateZ(${tz}px)`;
  });
}

五、常见误区

• 只调 rotateY 不调 translateZ，图片会挤在中心重叠。
• 把 gap 直接写在 margin 上，在 3D 旋转后并不等于视觉间距。
• perspective 放在 carousel 自身而非父级，导致 3D 失效。

只要记住间距 = 旋转均分 + Z 轴推开补偿，并用真实图片宽度加空隙代入计算，就能精准调控 CSS 3D 轮播图中图片之间的间距。

CSS_3Dcarouselimage_spacing修改时间：2026-07-31 05:21:21