css制作翻页

使用CSS制作翻页效果

翻页效果通常用于相册、轮播图或内容切换场景。以下是几种常见的实现方法：

基础翻页动画

通过CSS的transform和transition属性实现简单的翻页效果：

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

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

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

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

关键帧动画

使用@keyframes创建更复杂的翻页序列：

@keyframes flip {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(180deg); }
}

.flip-animation {
  animation: flip 1.5s ease-in-out;
  transform-origin: left center;
}

分页导航样式

为翻页控件添加视觉反馈：

.pagination {
  display: flex;
  gap: 8px;
}

.page-btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  cursor: pointer;
}

.page-btn.active {
  background: #4285f4;
  color: white;
  border-color: transparent;
}

3D翻书效果

创建更真实的3D翻页体验：

.book {
  perspective: 1000px;
}

.page-3d {
  transform: rotateY(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.42, 0, 0.58, 1);
}

.page-3d.turned {
  transform: rotateY(-180deg);
  box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}

响应式翻页按钮

确保翻页控件在不同设备上正常显示：

@media (max-width: 768px) {
  .page-btn {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

实际应用时需配合HTML结构和JavaScript事件处理。对于内容切换，可以通过添加/移除CSS类来控制当前显示页。动画性能优化建议使用will-change: transform属性，并避免过多同时进行的动画。