如何调整图片轮播组件（carousel）中图片的间距？

你这个3D轮播是通过translate3d属性控制幻灯片的X轴偏移和Z轴深度来实现堆叠效果的，之前调整失败应该是只改了部分选择器的transform值，导致布局失衡。按下面的方法改就能搞定：

核心调整逻辑 #

• 所有幻灯片的间距由translate3d(x, y, z)的X轴百分比数值控制，数值越大，图片间的横向间距越宽
• 同步调整Z轴的深度值，保证非激活幻灯片的视觉大小变化自然，不会出现层级错乱
• 必须统一修改所有对应选择器的transform值，不能只改某几个，否则轮播会直接坏掉

修改后的完整CSS代码 #

#slider_perso {
  position: relative;
  width: 20%;
  height: 32vw;
  margin: 150px auto;
  font-family: 'Helvetica Neue', sans-serif;
  perspective: 1500px;
  transform-style: preserve-3d;
}

input[type=radio] {
  position: relative;
  top: 108%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: 0 15px 0 0;
  opacity: 0.4;
  transform: translateX(-83px);
  cursor: pointer;
}

input[type=radio]:checked {
  opacity: 1;
}

#slider_perso label,
#slider_perso label img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  color: white;
  font-size: 70px;
  font-weight: bold;
  border-radius: 25px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 500ms ease;
}

/* 当前激活的幻灯片 */
#im1:checked~#slide1,
#im2:checked~#slide2,
#im3:checked~#slide3 {
  box-shadow: 0 13px 26px rgba(0, 0, 0, 0.3), 0 12px 6px rgba(0, 0, 0, 0.2);
  transform: translate3d(0%, 0, 0px);
}

/* 右侧相邻的第一张幻灯片 */
#im1:checked~#slide2,
#im2:checked~#slide3,
#im3:checked~#slide1 {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3), 0 2px 2px rgba(0, 0, 0, 0.2);
  transform: translate3d(25%, 0, -120px); /* 增大X轴偏移量拉开间距，微调Z轴保证视觉大小协调 */
}

/* 右侧第二张幻灯片 */
#im1:checked~#slide3,
#im2:checked~#slide1,
#im3:checked~#slide2 {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: translate3d(50%, 0, -300px); /* 对应增大X轴和Z轴数值 */
}

/* 左侧相邻的第一张幻灯片 */
#im1:checked~#slide3,
#im2:checked~#slide1,
#im3:checked~#slide2 {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3), 0 2px 2px rgba(0, 0, 0, 0.2);
  transform: translate3d(-25%, 0, -120px); /* 左侧和右侧保持对称数值 */
}

/* 左侧第二张幻灯片 */
#im1:checked~#slide2,
#im2:checked~#slide3,
#im3:checked~#slide1 {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: translate3d(-50%, 0, -300px); /* 左侧对应调整 */
}

额外提醒 #

• 你可以自己调整25%、50%这些X轴数值，数值越大，图片间距越宽
• Z轴的负值越大，幻灯片看起来越小，要和X轴偏移量匹配，不然视觉上会很奇怪
• 你的HTML里只有3张幻灯片，原来CSS里的#im4、#im5相关选择器完全没用，建议删掉，避免冗余代码引发不必要的问题

内容的提问来源于stack exchange，提问作者Softee