很酷的书籍翻转3d动画

最新推荐文章于 2025-12-06 10:52:42 发布

转载最新推荐文章于 2025-12-06 10:52:42 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yy123.ink/frontDetail/12484

文章标签：

#3d #动画

网站模版专栏收录该内容

3170 篇文章

订阅专栏

本文介绍了如何使用CSS3的transition和transform属性创建逼真的翻书效果。通过定义'hoveron'和'hoveroff'过渡类，实现了书页平滑翻开和关闭的动画。详细展示了不同页面的旋转角度和过渡时间设置，以及关闭时如何避免封面重叠。此外，还提到了简单的封面设计技巧，包括添加背景图片和小红丝带装饰。

下载地址

这两本书我使用这项技术的过渡“hover on”和“hover off”,是通过简单地定义中的“hover on”转变:悬浮类和“hover off”过渡的原始类声明的元素。Hover on当我们打开这本书,封面的变化从“z - index:100;为0。页有不同的过渡时间,创建一个平滑的开放。.book:hover > .hardcover_front { transform: rotateY(-145deg) translateZ(0); z-index: 0;}.book:hover > .page li:nth-child(1) { transform: rotateY(-30deg); transition-duration: 1.5s;}.book:hover > .page li:nth-child(2) { transform: rotateY(-35deg); transition-duration: 1.8s;}.book:hover > .page li:nth-child(3) { transform: rotateY(-118deg); transition-duration: 1.6s;}.book:hover > .page li:nth-child(4) { transform: rotateY(-130deg); transition-duration: 1.4s;}.book:hover > .page li:nth-child(5) { transform: rotateY(-140deg); transition-duration: 1.2s;}Hover off当我们关闭这本书,我们可以避免重叠的封面页通过减少过渡时间的页面。.hardcover_front{ transition: all 0.8s ease, z-index 0.6s;}.page > li { width: 100%; height: 100%; transform-origin: left center; transition-property: transform; transition-timing-function: ease;}.page > li:nth-child(1) { transition-duration: 0.6s;}.page > li:nth-child(2) { transition-duration: 0.6s;}.page > li:nth-child(3) { transition-duration: 0.4s;}.page > li:nth-child(4) { transition-duration: 0.5s;}.page > li:nth-child(5) { transition-duration: 0.6s;}封面设计封面设计相当简单;我已经添加了类“coverDesign”作为初始配置和第二个类背景或图像。一个替代的封面上放置一个图像如下:添加一个小红丝带封面,只需添加:这就是它!我希望它是有用的!