实现3D动画书籍效果

共计4475字,阅读大约15分钟。

演示

设置场景

<div class="book-container">
  <div class="book">
    <!-- will be a <img> at the end -->
    <div />
  </div>
</div>
.book {
  width: 200px;
  height: 300px;
}

.book > :first-child {
  background: #0d47a1aa;
  width: 200px;
  height: 300px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

因此,我们有了封面的第一张照片:

图片[1] | Web Stack | 实现3D动画书籍效果 | 一个栈
第1步结果:我们的书还是有点平淡无奇的...

添加3D

.book-container {
  /* ... */
  transform-style: preserve-3d;
  perspective: 400px;
}

.book {
  /* ... */
  transform: rotateY(-30deg);
}
图片[2] | Web Stack | 实现3D动画书籍效果 | 一个栈
第2步结果:是的,它是3D的!

添加页面

.book {
  /* ... */
  position: relative;
}

.book::before {
  position: absolute;
  content: ' ';
  background: #bf360caa;
  height: 300px;
  width: 50px;
  transform: translateX(calc(200px - 50px / 2))
             rotateY(90deg)
             translateX(calc(50px / 2));
  height: calc(300px - 2 * 3px);
  top: 3px;
  transform: translateX(calc(200px - 50px / 2 - 3px)) /* ... */
}
图片[3] | Web Stack | 实现3D动画书籍效果 | 一个栈
步骤4结果:现在页面在好的地方!

添加封底

.book::after {
//尺寸和原点位置与前盖相同
  content: ' ';
  position: absolute;
  left: 0;
  width: 200px;
  height: 300px;
  background: #1b5e20aa;

  transform: translateZ(-50px); //对Z轴应用一个平移,其值等于书的厚度
}
图片[4] | Web Stack | 实现3D动画书籍效果 | 一个栈
第5步结果:还有封底!

添加动画

.book {
  /*我们要添加的第一个动画是在悬停时旋转书籍*/
  transition: transform 1s ease;
  animation: 1s ease 0s 1 initAnimation;
}

@keyframes initAnimation {
//当页面加载时:我们希望书从非旋转到旋转(相反的动画)
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(-30deg); }
}
.book:hover {
  transform: rotate(0deg);
//让我们应用我们想要的旋转(0度,因此本书将从“旋转”传递到未“旋转”)
}
图片[5] | Web Stack | 实现3D动画书籍效果 | 一个栈
第6步结果:这就是我所说的“哇”效果!

添加阴影等效果

现在,我们所有的元素都已正确定位和动画化,我们只需要显示实际的书籍封面而不是彩色背景。

<div class="book-container">  <div class="book">    <img      src="https://d2sofvawe08yqg.cloudfront.net/outstanding-developer/hero2x?1595108679"    />  </div></div>

作为一个不错的小补充,让我们在书中添加一些阴影,我们完成了!

.book > :first-child {  /* ... */  box-shadow: 5px 5px 20px #666;}.book::before {  /* ... */  background: #fff;}.book::after {  /*  */  background: #01060f;  box-shadow: -10px 0 50px 10px #666;}

原作者

我们的动画3D书现已完成!

您可以在CodePen上找到本教程的完整代码,或者在GitHub上查看源代码。

请注意,为了使其与Edge一起使用,我必须删除属性中的CSS变量和计算()。这有点悲伤;第一个版本使用CSS变量,因此可以在不更新核心CSS的情况下配置大小。但至少现在它无处不在!(好的,我没有在互联网博览会上测试过,我也不会😉)

很可爱的国外作者

演示的源代码

document.write(`<style>
    .book-container-62efca1440e6fd0017eaa25a {
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 600px;
    }
    
    @keyframes initAnimation-62efca1440e6fd0017eaa25a {
      0% {
        transform: rotateY(0deg);
      }
      100% {
        transform: rotateY(-30deg);
      }
    }
    
    .book-container-62efca1440e6fd0017eaa25a .book {
      width: 200px;
      height: 282px;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateY(-30deg);
      transition: transform 1s ease;
      animation: 1s ease 0s 1 initAnimation-62efca1440e6fd0017eaa25a;
    }
    
    .book-container-62efca1440e6fd0017eaa25a .book:hover {
      transform: rotateY(0deg);
    }
    
    .book-container-62efca1440e6fd0017eaa25a .book > :first-child {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 282px;
      transform: translateZ(25px);
      background-color: #1e5eb4;
      border-radius: 0 2px 2px 0;
      box-shadow: 5px 5px 20px #91aace;
      background-color: #1e5eb4;
    }
    
    .book-container-62efca1440e6fd0017eaa25a .book::before {
      position: absolute;
      content: ' ';
      left: 0;
      top: 3px;
      width: 48px;
      height: 276px;
      transform: translateX(172px) rotateY(90deg);
      background: linear-gradient(90deg, 
        #fff 0%,
        #f9f9f9 5%,
        #fff 10%,
        #f9f9f9 15%,
        #fff 20%,
        #f9f9f9 25%,
        #fff 30%,
        #f9f9f9 35%,
        #fff 40%,
        #f9f9f9 45%,
        #fff 50%,
        #f9f9f9 55%,
        #fff 60%,
        #f9f9f9 65%,
        #fff 70%,
        #f9f9f9 75%,
        #fff 80%,
        #f9f9f9 85%,
        #fff 90%,
        #f9f9f9 95%,
        #fff 100%
        );
    }
    
    .book-container-62efca1440e6fd0017eaa25a .book::after {
      position: absolute;
      top: 0;
      left: 0;
      content: ' ';
      width: 200px;
      height: 282px;
      transform: translateZ(-25px);
      background-color: #1e5eb4;
      border-radius: 0 2px 2px 0;
      box-shadow: -10px 0 50px 10px #91aace;
    }
  </style>

    <div class="book-container-62efca1440e6fd0017eaa25a">
      <div class="book">
        <img alt="小岛经济学" src="https://www.seclusion.work/cdn/books/s29108652.jpg" />
      </div>
    </div>
  `)
温馨提示:本文最后更新于2022-08-13 20:12:36,某些文章具有时效性,若有错误或已失效,请在下方留言或联系雅舍站长
© 版权声明
THE END
有所帮助就支持一下吧
点赞9当赏 分享
箴言区 共1条
头像
达瓦里希请发言...
提交
头像

昵称

取消
昵称表情代码图片