CSS 如何实现翻书效果？

Question

CSS 如何实现翻书效果？

仓乃文 · Accepted Answer

翻书效果通过 transform-origin + rotateY 实现页面从左向右翻转，模拟翻书的视觉效果。

```css
.book {
  position: relative;
  width: 300px;
  height: 400px;
  perspective: 1500px;
}

.page {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  transform-origin: left center;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

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

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

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

补充说明：
- transform-origin: left center 让翻页轴心在左侧
- 页面宽度设为 50%，从右半部分开始翻转
- backface-visibility: hidden 确保翻页时只显示一面
- 适合电子书阅读器、相册浏览等场景