帮我用css写一个翻书的样式

好的，下面是一个简单的翻书效果的 CSS 代码示例：

.book {
  position: relative;
  width: 200px;
  height: 300px;
  perspective: 1000px;
}

.book .page {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background: white;
  backface-visibility: hidden;
  transform-origin: left center;
  transition: transform 0.5s ease-in-out;
}

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

.book .cover {
  width: 100%;
  height: 100%;
}

.book .cover.front {
  background: url(front-cover.jpg) center center no-repeat;
  background-size: cover;
}

.book .cover.back {
  background: url(back-cover.jpg) center center no-repeat;
  background-size: cover;
}

使用方法：

1. 为书的每一页和封面分别创建一个 `div` 元素。
2. 为所有的页面元素添加 `page` 类。
3. 为所有的封面元素添加 `cover` 类。
4. 为正面封面元素添加 `front` 类，为背面封面元素添加 `back` 类。

在 JavaScript 中，您可以使用 `classList.toggle` 方法来控制页面的翻页效果：

document.querySelector('.page').classList.toggle('flipped');

希望这对您有帮助！