css翻页动画制作

CSS翻页动画制作方法

关键属性与实现思路 使用CSS的transform、transition或animation属性实现3D空间变换，结合perspective创造景深效果。典型动画包括翻书页、卡片翻转、杂志翻页等交互效果。

基础翻页效果（Y轴旋转）

通过绕Y轴旋转创建书本翻页效果，需设置3D变换环境和过渡时间：

.page {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s ease;
  transform-origin: left center;
}
.page:hover {
  transform: rotateY(-180deg);
}

需为页面正反面分别设置样式，使用backface-visibility: hidden隐藏背面内容。

3D立体翻页增强版

添加透视和阴影增强真实感：

.book {
  perspective: 2000px;
}
.page {
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  background: linear-gradient(90deg, #f9f9f9 95%, #ddd 100%);
}
.page::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: rgba(0,0,0,0.05);
}

关键帧动画控制

使用@keyframes实现自动翻页或分段控制：

@keyframes pageFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(-90deg); }
  100% { transform: rotateY(-180deg); }
}
.auto-flip {
  animation: pageFlip 2s forwards;
}

实战注意事项

• 移动端需添加-webkit-transform-style兼容前缀
• 复杂场景可结合JavaScript动态添加类名控制动画触发
• 性能优化：对动画元素使用will-change: transform
• 可配合伪元素创建书页卷曲效果

完整示例应包含HTML结构层、正面背面内容容器及触发逻辑，实际项目中建议使用CSS变量控制动画速度和方向参数。