js 实现图片翻页效果

实现图片翻页效果的方法

使用CSS和JavaScript可以实现多种图片翻页效果，以下提供两种常见方案：

基础CSS过渡动画

通过CSS的transform和transition属性实现平滑翻页动画：

.flip-container {
  perspective: 1000px;
  width: 300px;
  height: 200px;
}
.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flipper.flipped {
  transform: rotateY(180deg);
}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
}

const flipper = document.querySelector('.flipper');
flipper.addEventListener('click', () => {
  flipper.classList.toggle('flipped');
});

使用JavaScript动画库

借助GSAP等专业动画库实现更复杂效果：

import { gsap } from "gsap";

function flipImage(element) {
  gsap.to(element, {
    duration: 1,
    rotationY: 180,
    ease: "power2.inOut",
    onComplete: () => {
      element.style.zIndex = -1;
    }
  });
}

完整实现示例

以下代码实现点击触发的3D翻页效果：

<div class="flip-container">
  <div class="flipper">
    <img src="front.jpg" class="front">
    <img src="back.jpg" class="back">
  </div>
</div>

document.querySelectorAll('.flipper').forEach(flipper => {
  let isFlipped = false;

  flipper.addEventListener('click', () => {
    isFlipped = !isFlipped;
    flipper.style.transform = isFlipped 
      ? 'rotateY(180deg)' 
      : 'rotateY(0deg)';
  });
});

进阶效果优化

添加阴影和深度感增强3D效果：

.flip-container {
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.flipper {
  transform-origin: center center;
}

响应式设计注意事项

确保翻页容器在不同设备上保持比例：

.flip-container {
  aspect-ratio: 3/2;
  max-width: 100%;
}

以上方案可根据实际需求调整动画时长、缓动函数和触发方式。对于多图轮播场景，可配合数组索引管理当前显示图片。