当前位置：首页 > JavaScript

js实现3d图片轮播

2026-01-30 16:59:43JavaScript

实现3D图片轮播的基本思路

使用CSS 3D变换和JavaScript实现动态轮播效果，核心是通过transform-style: preserve-3d创建3D空间，通过旋转控制图片的展示角度。

HTML结构

基础结构需包含轮播容器和图片项：

<div class="carousel-container">
  <div class="carousel">
    <div class="item"><img src="image1.jpg"></div>
    <div class="item"><img src="image2.jpg"></div>
    <div class="item"><img src="image3.jpg"></div>
  </div>
</div>

CSS样式

设置3D空间和基础样式：

.carousel-container {
  perspective: 1000px;
  width: 300px;
  margin: 0 auto;
}
.carousel {
  transform-style: preserve-3d;
  position: relative;
  height: 200px;
  transition: transform 1s;
}
.item {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

JavaScript逻辑

计算每张图片的旋转角度并动态更新位置：

const carousel = document.querySelector('.carousel');
const items = document.querySelectorAll('.item');
const itemCount = items.length;
const angle = 360 / itemCount;

function setupCarousel() {
  items.forEach((item, index) => {
    item.style.transform = `rotateY(${index * angle}deg) translateZ(250px)`;
  });
}

let currentAngle = 0;
function rotateCarousel() {
  currentAngle += angle;
  carousel.style.transform = `rotateY(${currentAngle}deg)`;
}

setupCarousel();
setInterval(rotateCarousel, 3000);

优化交互

添加导航按钮控制轮播方向：

document.querySelector('.prev').addEventListener('click', () => {
  currentAngle -= angle;
  carousel.style.transform = `rotateY(${currentAngle}deg)`;
});

document.querySelector('.next').addEventListener('click', () => {
  currentAngle += angle;
  carousel.style.transform = `rotateY(${currentAngle}deg)`;
});

响应式调整

根据窗口大小动态调整3D空间参数：

function adjustLayout() {
  const radius = Math.min(window.innerWidth, 800) / 2;
  items.forEach(item => {
    item.style.transform = item.style.transform.replace(/translateZ\(.*?\)/, `translateZ(${radius}px)`);
  });
}
window.addEventListener('resize', adjustLayout);