求助：基于HTML、CSS、JS及Bootstrap 5实现无限图片与3D平移效果

需求说明 #

要实现类似public.work的无限图片网格，支持鼠标拖拽进行3D视角平移，当前使用HTML、CSS、JavaScript和Bootstrap 5开发，基于现有代码完成功能，并提供替代方案。

修改后的完整实现代码 #

HTML 代码 #

<main>
  <div class="container-fluid" id="grid-container">
    <div class="row grid-row">
      <!-- 原有图片项 -->
      <div class="col-4 col-xl-3">
        <a href="pages/rib/products/blackShirt.html">
          <img src="assets/images/rib/BLACK-SHIRT.jpg" class="img-fluid" alt="black-shirt" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/rib/products/whiteShirt.html">
          <img src="assets/images/rib/WHITE-SHIRT.JPG" class="img-fluid" alt="white-shirt" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/rib/products/greyShirt.html">
          <img src="assets/images/rib/GREY-SHIRT.JPG" class="img-fluid" alt="grey-shirt" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/rib/products/blackCap.html">
          <img src="assets/images/rib/BLACK-CAP.jpg" class="img-fluid" alt="black-cap" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/rib/products/redCap.html">
          <img src="assets/images/rib/RED-CAP.jpg" class="img-fluid" alt="red-cap" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/podium-ocra/products/teamJersey.html">
          <img src="assets/images/podium-ocra/team-jersey.jpg" class="img-fluid" alt="team-jersey" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/podium-ocra/products/ocraGreen.html">
          <img src="assets/images/podium-ocra/ocra-green.jpg" class="img-fluid" alt="ocra-green-shirt" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/podium-ocra/products/toteBag.html">
          <img src="assets/images/podium-ocra/tote-bag.jpg" class="img-fluid" alt="tote-bag" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/podium-ocra/products/glassCup.html">
          <img src="assets/images/podium-ocra/glass-cup.jpg" class="img-fluid" alt="glass-cup" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/podium-ocra/products/stickerPack.html">
          <img src="assets/images/podium-ocra/sticker-pack.jpg" class="img-fluid" alt="sticker-pack" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/podium-ocra/products/capNavy.html">
          <img src="assets/images/podium-ocra/cap-navy.jpg" class="img-fluid" alt="cap-navy" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/podium-ocra/products/capBlue.html">
          <img src="assets/images/podium-ocra/cap-blue.jpg" class="img-fluid" alt="cap-blue" />
        </a>
      </div>
      <div class="col-4 col-xl-3">
        <a href="pages/podium-ocra/products/capGreen.html">
          <img src="assets/images/podium-ocra/cap-green.jpg" class="img-fluid" alt="cap-green" />
        </a>
      </div>
    </div>
  </div>
</main>

CSS 代码 #

/* 基础3D视角设置 */
main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  perspective: 1000px; /* 开启3D视角 */
  cursor: grab;
}

#grid-container {
  width: 300%; /* 扩大容器宽度，为无限滚动预留空间 */
  height: 300%;
  transform-style: preserve-3d; /* 保持子元素3D效果 */
  position: relative;
  transition: transform 0.1s ease-out; /* 平滑拖动过渡 */
}

.grid-row {
  width: 100%;
  position: relative;
}

.img-fluid {
  transition: transform 0.3s ease;
}

.img-fluid:hover {
  transform: translateZ(20px); /* 鼠标悬停时图片上浮的3D效果 */
  cursor: pointer;
}

/* 移动端适配 */
@media (max-width: 576px) {
  #grid-container {
    width: 400%;
    height: 400%;
  }
}

.grabbing {
  cursor: grabbing;
}

JavaScript 代码 #

document.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById("grid-container");
  const row = document.querySelector(".grid-row");
  const rowWidth = row.offsetWidth;
  const rowHeight = row.offsetHeight;

  // 复制网格内容，实现视觉无限滚动
  for (let i = 0; i < 4; i++) {
    const cloneRow = row.cloneNode(true);
    container.appendChild(cloneRow);
  }

  let isDragging = false;
  let startX, startY;
  let currentX = 0, currentY = 0;

  // 鼠标按下事件
  container.addEventListener("mousedown", (e) => {
    isDragging = true;
    document.body.classList.add("grabbing");
    startX = e.clientX - currentX;
    startY = e.clientY - currentY;
  });

  // 鼠标移动事件
  document.addEventListener("mousemove", (e) => {
    if (!isDragging) return;

    // 计算新的偏移量
    currentX = e.clientX - startX;
    currentY = e.clientY - startY;

    // 应用3D平移
    container.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;

    // 无限滚动逻辑：重置偏移量，实现循环
    if (Math.abs(currentX) >= rowWidth) {
      currentX = currentX % rowWidth;
      container.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;
    }
    if (Math.abs(currentY) >= rowHeight) {
      currentY = currentY % rowHeight;
      container.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`;
    }
  });

  // 鼠标松开事件
  document.addEventListener("mouseup", () => {
    isDragging = false;
    document.body.classList.remove("grabbing");
  });

  // 防止默认拖拽行为
  container.ondragstart = () => false;
});

功能说明 #

1. 3D平移效果：通过perspective和translate3d实现拖拽时的3D空间感，鼠标悬停图片时会有上浮效果增强立体感。
2. 无限滚动：通过复制网格内容，并在拖拽到边界时重置偏移量，实现视觉上的无限网格效果。
3. 平滑拖拽：添加过渡动画让拖拽动作更流畅，鼠标状态切换（grab/grabbing）提升交互体验。

替代方案 #

1. 使用GSAP动画库 #

GSAP可以更便捷地实现复杂的3D拖拽和滚动效果，内置物理引擎让交互更自然，适合需要精细控制动画的场景。

• 优势：动画流畅度更高，支持惯性滚动、边界回弹等高级效果，代码更简洁。
• 实现思路：用GSAP的Draggable插件绑定容器，配置inertia和bounds属性，结合复制内容实现无限滚动。

2. Three.js实现WebGL级3D效果 #

如果需要更极致的3D视觉（比如景深、光影），可以用Three.js构建网格场景，将图片作为平面几何体加载，实现真正的3D空间拖拽。

• 优势：完全自定义3D效果，支持复杂的光影和材质，适合视觉要求极高的项目。
• 劣势：学习成本高，代码复杂度大，性能消耗比CSS 3D更高。

3. CSS Scroll Snap + 无限加载 #

如果不需要拖拽，仅需滚动时的3D视差和无限加载，可以用CSS Scroll Snap固定滚动位置，结合Intersection Observer监听滚动边界，动态加载新的图片内容。

• 优势：依赖CSS原生特性，性能好，实现简单。
• 劣势：交互方式为滚动而非拖拽，不符合目标网站的核心交互。

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