纯 CSS3 实现3D翻书效果

WHAT

想在博客中加入读书笔记，并想呈现出书本的展示，如果可以加入翻书动画展示就更棒了~

如果是寻求一个较为成熟的多页翻书效果，可使用 turn.js (Make a flip book with HTML5)

若不想加入复杂的 jQuery 等插件，索性尝试下纯 CSS3 的实现吧~ 经尝试，动图效果如下：

适用场景：类仿真书本的前端呈现，封面以及内页可定制 ~

HOW

Talk is cheap. Show me the code. 不想看文章的直接 →_→ CodeSandBox Example

代码实现

示例分为两个，代码差不多，不同点在于最后是否呈现打开，HTML 结构如下：

    <div class="book preserve-3d border-round">
      <div class="flip-animation-1 point">
        <div class="book-page first-page border-round">
          <p>Note 1</p>
        </div>
      </div>
    </div>
    <div class="book preserve-3d book2 border-round">
      <div class="flip-animation-2 point">
        <div class="book-page first-page border-round">
          <p>Note 2</p>
        </div>
      </div>
    </div>

CSS 相关代码如下（内页背景借用了 baidu 的 logo）：

.book {
  height: 200px;
  width: 200px;
  background: #fff
    url("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png")
    no-repeat;
  background-size: 200px;
  position: absolute;
  top: 10%;
  left: 40%;
  transform: rotateX(30deg);
}

.book2 {
  top: 50% !important;
}

.border-round {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/*内容样式*/
.book-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border: 1px solid #777;
  text-align: center;
  background-color: #fff;
}
.book-page p {
  font-size: 30px;
  color: rgb(236, 67, 67);
  margin-top: 50px;
}

/*封面样式*/
.first-page {
  background-color: #777;
}
.first-page p {
  font-size: 30px;
  color: #dedef399;
  margin-top: 50px;
}

/*动画部分*/
.flip-animation-1 {
  animation: flipBook1 2s;
  animation-fill-mode: forwards;
}

@keyframes flipBook1 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-160deg);
  }
}

.flip-animation-2 {
  animation: flipBook2 4s;
}

@keyframes flipBook2 {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-160deg);
  }
}

/*维持3D效果：即显示出rotateZ轴的效果*/
.preserve-3d {
  transform-style: preserve-3d;
}

/*绕某点转动：即 “绕某点转动” + “绕Y轴转动” 两个效果叠加后 实现了每页绕书的左边缘转动*/
.point {
  transform-origin: 0% 100%;
}

原理很简单，只是实现了 div 层的旋转（需加 .point 绕侧边旋转，可以试着把 point class 去掉理解，如下）

列出相关的技术点：

呈现 3D 效果 transform-style: preserve-3d （transform-style）
实现绕轴转动 transform-origin
animation 可通过 animation-fill-mode 设置不同效果 (animation-fill-mode)
@keyframes 关键帧改变 div transform 属性

扩展应用

本文只是提供一个动画效果纯 CSS 实现的思路，代码比较简单，可加入实现鼠标移上翻开，移出关闭等效果

更多可参考怎么实现一个3d翻书效果 From 掘金；门的动效也类似，可参考 CSS CSS3实现3D开门动画效果