css做翻书的效果

CSS翻书效果是制作旅游广告、电子书、杂志等应用非常重要的效果之一，下面我们就来看看如何用CSS来实现这一效果。

.book-cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(cover.jpg);
      background-size: cover;
      overflow: hidden;
      -webkit-perspective: 2000px;
      perspective: 2000px;
}
.book {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
}
.book .page {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 0 5px rgba(0,0,0,0.2);
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
}
.front {
      z-index: 2;
      -webkit-transform: rotateY(0deg);
      transform: rotateY(0deg);
}
.back {
      z-index: 1;
      -webkit-transform: rotateY(-180deg);
      transform: rotateY(-180deg);
}
.animate {
      -webkit-transition: -webkit-transform .5s ease;
      transition: transform .5s ease;
}
.right {
      -webkit-transform-origin: left;
      transform-origin: left;
}
.left {
      -webkit-transform-origin: right;
      transform-origin: right;
}
    

上述CSS代码中，涉及到的属性和值较多，下面会逐一解释一下：

book-cover: 表示书籍封面的样式，设定其背景、宽高、overflow 以及透视效果等。

book: 表示整本书的样式，包含着所有页面的样式。

page: 表示书中的每一页的样式。

front/back: 分别表示书的正反两面的样式，分别设定不同的 z-index 和旋转角度。

animate: 表示页面转换时需要有一个平滑的过渡效果。

left/right: 分别表示翻页方向的不同，需要设置轴心点。

以上的CSS样式只是实现翻书效果的基本样式，具体实现还需要JS的结合，比如说明前后两页的页面，鼠标点击等事件。

通过JS的调整，相关属性可以动态修改，从而实现美妙的翻书效果。

总之，CSS翻书效果是非常实用的效果之一，可以大大提高广告、电子书、杂志等应用的阅读体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！