持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

学习一下CSS制作翻页效果，主要用到的参数有：perspective，animation, rotateY(), transform-origin

学习链接

Pure CSS3 3D Flipbook Loader (codepen.io) - 案例

其他资源

40+ Amazing CSS 3D Design Examples – Bashooka

功能实现

• 翻页效果

预备知识

perspective - CSS（层叠样式表） | MDN (mozilla.org)

• 设置为负值没有效果
• 它的值越小，视角越深。

perspctive属性 - 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

transform-origin - CSS（层叠样式表） | MDN (mozilla.org)

• 更改一个元素变形的原点。

animation-fill-mode - CSS（层叠样式表） | MDN (mozilla.org)

• 设置CSS动画在执行之前和之后如何将样式应用于其目标。
• 案例用的是 - animation-fill-mode: forwards;
• 到100% 就不动了。。这样翻页效果，就从起点开始了

代码细节

慢镜头

整体结构

• book的宽高 - 200px * 60px - 设置边框（上下左右）
• book-page宽高 - 100px * 60px - 设置边框（上右左）

div.book
    div.book_page * 3

翻页效果

.book__page{
    position: absolute;
    left: 50%;
    top: -5px;
    margin: 0 auto;
    border-top: 5px solid $clouds;// 设置边框
    border-bottom: 5px solid $clouds;
    border-right: 5px solid $clouds;
    background: $peter-river;
    width: 50px; // 设置宽高
    height: 60px;
    transform-origin: 0% 50%; // 设置原点 - 左侧中间
    animation: flip 12s infinite linear; // 翻页动画
    animation-fill-mode: forwards; // 设置起始和结束的过度效果

    @for $i from 1 through 3 { // 设置每页不同的延迟时间。
      &:nth-child(#{$i}) {
        z-index: -$i; // 翻的第一页在最上面！ -1，-2，-3，越小越后面。
        animation-delay: 1.4s * $i;
      }
    }
 
 // 核心动画 - 测试一下！
@keyframes flip {
  0%{
      // 设置透视距离，沿 y轴 旋转
      transform: perspective( 600px ) rotateY( -0deg );
  }
  20%{
    background:darken($peter-river,10%);
  }
  29.9%{
      background:darken($peter-river,10%);
  }
  30%{
      // 旋转到 -90度 逆时针
      transform: perspective( 200px ) rotateY( -90deg );
      background:$peter-river;
  }
  54.999%{
    opacity:1;
  }
  55%{
     // 修改的透明度，表示翻过去了!
    opacity:0;
  }
  60%{
  // 翻到底了。
    transform: perspective( 200px ) rotateY( -180deg );
    background:$peter-river;
  }
  100%{
  // 保持在底部。。这样不会一直在翻页 - 学到了！
    transform: perspective( 200px ) rotateY( -180deg );
    background:$peter-river;
  }
}

主要测试的是30%的时候，，运行到中间，看看效果怎么样！

perspective 设置为0的效果

• 已经超出了屏幕的感觉。。
• perspective - z的距离
• 我们在0的位置看图形

perspective 设置为60的效果

• 这是book设置的高度 - height: 60px;
• 能看到全貌了，而且边框就在眼前了！

perspective 设置为200的效果

• 案例设置的参数
• 效果很棒！

perspective 设置为600的效果

• 和200 的并没有什么差别。。

perspective总结

• perspective的设置和元素自身的高度，也有关系。

perspective 属性定义。它的值越小，视角越深。 - MDN

设计实践

加点图片 & Book放大一点！

• height： 150px;
• perspective设置为600了

码上掘金 (juejin.cn)

总结

学习内容

• 设置perspective，它可以设置 z 轴的距离
• 结合旋转(rotateY / rotateX)，可以看到透视效果
• 动画效果 - animation 中60% 和100% 设置为一样的，可以当作延迟效果
• animation-fill-mode: forwards - 可以设置动画的起始 和结束的过度效果。

前事之不忘，后事之师也。