如何实现内部视角的3D旋转Carousel组件？

你需要对现有代码做以下几处核心修改，就能实现从圆柱内部观看的3D轮播效果：

修改后的完整代码 #

JavaScript 代码 #

window.addEventListener('load', () => {
  var carousels = document.querySelectorAll('.carousel');

  for (var i = 0; i < carousels.length; i++) {
    carousel(carousels[i]);
  }
});

function carousel(root) {
  var
    figure = root.querySelector('figure'),
    nav = root.querySelector('nav'),
    images = figure.children,
    n = images.length,
    gap = root.dataset.gap || 0,
    bfc = 'bfc' in root.dataset,
    theta = 2 * Math.PI / n,
    currImage = 0;

  setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
  
  window.addEventListener('resize', () => {
    setupCarousel(n, parseFloat(getComputedStyle(images[0]).width))
  });

  setupNavigation();

  function setupCarousel(n, s) {
    var apothem = s / (2 * Math.tan(Math.PI / n));

    // 调整figure的变换原点，让轮播中心轴向外移动
    figure.style.transformOrigin = `50% 50% ${apothem}px`;

    for (var i = 0; i < n; i++) {
      images[i].style.padding = `${gap}px`;
      // 翻转图片避免内部视角下的镜像问题
      images[i].style.transform = 'scaleX(-1)';
    }
      
    for (i = 1; i < n; i++) {
      // 调整图片的变换原点，使其围绕圆柱中心轴排列
      images[i].style.transformOrigin = `50% 50% ${apothem}px`;
      // 反向旋转图片，让图片朝向圆柱内部
      images[i].style.transform += ` rotateY(${-i * theta}rad)`;
    }
    
    if (bfc) {
      for (i = 0; i < n; i++) {
        // 关闭背面隐藏，需要看到图片翻转后的正面
        images[i].style.backfaceVisibility = 'visible';
      }
    }

    rotateCarousel(currImage);
  }

  function setupNavigation() {
    nav.addEventListener('click', onClick, true);

    function onClick(e) {
      e.stopPropagation();

      var t = e.target;
      
      if (t.tagName.toUpperCase() != 'BUTTON') {
        return;
      }

      if (t.classList.contains('next')) {
        currImage++;
      } 
      else {
        currImage--;
      }

      rotateCarousel(currImage);
    }
  }

  function rotateCarousel(imageIndex) {
    // 反向旋转整个轮播，保持导航逻辑与视觉方向一致
    figure.style.transform = `rotateY(${imageIndex * theta}rad)`;
  }
}

CSS 代码 #

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

h1 {
  text-align: center;
  margin-bottom: 1.5em;
}

h2 {
  text-align: center;
  color: #555;
  margin-bottom: 0;
}

.carousel {
  padding: 20px;
  perspective: 800px; /* 增大透视值，让内部视角空间感更自然 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel>* {
  flex: 0 0 auto;
}

.carousel figure {
  margin: 0;
  width: 40%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.carousel figure img {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0px;
}

.carousel figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
}

.carousel nav {
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}

.carousel nav button {
  flex: 0 0 auto;
  margin: 0 5px;
  cursor: pointer;
  color: #333;
  background: none;
  border: 1px solid;
  letter-spacing: 1px;
  padding: 5px 10px;
}

HTML 代码 #

<h2>内部视角3D轮播（8张图片，80px间距）</h2>

<div class="carousel" data-gap="80">
  <figure>
    <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="">
    <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="">
    <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="">
    <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="">
    <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="">
    <img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="">
    <img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="">
    <img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="">
  </figure>
  
  <nav>
    <button class="nav prev">上一张</button>
    <button class="nav next">下一张</button>
  </nav>
</div>

核心修改说明 #

• 变换原点方向调整：将figure和图片的transformOrigin中z轴值从负改为正，让轮播中心轴向外移动，模拟站在圆柱内部的视角。
• 图片翻转处理：给每张图片添加scaleX(-1)，解决内部视角下图片镜像反转的问题。
• 图片旋转方向反转：修改图片的rotateY角度符号，让图片朝向圆柱内部排列。
• 关闭背面隐藏：取消backfaceVisibility: hidden，确保能看到翻转后的图片正面。
• 轮播旋转方向调整：修改rotateCarousel中的旋转角度符号，保证导航按钮操作逻辑与视觉效果一致。
• 透视值优化：增大perspective数值，提升内部视角的空间沉浸感。

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