css翻页动画制作

CSS翻页动画制作方法

翻页动画可以通过CSS的transform和transition属性实现。以下是一个简单的翻页效果示例：

<div class="page-container">
  <div class="page">内容</div>
</div>

.page-container {
  perspective: 1000px;
  width: 300px;
  height: 400px;
}

.page {
  width: 100%;
  height: 100%;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  transition: transform 1s;
  transform-origin: left center;
}

.page-container:hover .page {
  transform: rotateY(-180deg);
}

3D翻书效果

要实现更真实的3D翻书效果，可以使用CSS的transform-style: preserve-3d：

.book {
  width: 300px;
  height: 400px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front {
  background: #fff;
  transform: rotateY(0deg);
}

.back {
  background: #f5f5f5;
  transform: rotateY(180deg);
}

.book:hover {
  transform: rotateY(-180deg);
}

多页翻页效果

对于多页翻页效果，可以使用CSS动画关键帧：

@keyframes pageFlip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-180deg);
  }
}

.page {
  animation: pageFlip 2s infinite alternate;
}

响应式翻页设计

确保翻页效果在不同设备上都能正常显示：

@media (max-width: 768px) {
  .page-container {
    width: 200px;
    height: 300px;
  }
}

添加阴影效果

增强翻页的真实感：

.page {
  box-shadow: 
    5px 5px 10px rgba(0,0,0,0.2),
    inset 0 0 30px rgba(0,0,0,0.1);
}

JavaScript控制翻页

使用JavaScript可以更精确地控制翻页动画：

document.querySelector('.page').addEventListener('click', function() {
  this.style.transform = 'rotateY(-180deg)';
});

这些方法可以根据具体需求组合使用，创建出各种不同的翻页动画效果。