欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

前端学习（284）：纯css实现翻书效果

发布时间：2023/12/10 HTML 60 豆豆
生活随笔 收集整理的这篇文章主要介绍了 前端学习（284）：纯css实现翻书效果 小编觉得挺不错的,现在分享给大家,帮大家做个参考.
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>纯css3实现翻书效果</title><link href="reset.css" rel="stylesheet" type="text/css"><style>body {background-color: #000;}.perspective {margin-top: 100px;perspective: 800px;transform-style: preserve-3d;}.book-wrap {width: 300px;height: 300px;position: relative;margin: 0 auto;transform: rotateX(30deg);transform-style: preserve-3d;}.page {width: 100%;height: 100%;position: absolute;left: 0;top: 0;font-size: 30px;display: flex;justify-content: center;align-items: center;transform-origin: left;border: 1px solid #1976D2;}.book-cover {background-color: #1976D2;color: #ffffff;animation: roll 6s ease 0s 2 alternate;}.book-content {background-color: #fff;color: #33363C;}.book-content1{animation: roll 3s ease 3s 2 alternate;}.book-content2 {animation: roll 4s ease 2s 2 alternate;}.book-content3 {animation: roll 5s ease 1s 2 alternate;}@keyframes roll {from {transform: rotateY(0)}to {transform: rotateY(-180deg)}}</style> </head> <body><div class="perspective"><div class="book-wrap"><div class="page book-content">end</div><div class="page book-content book-content1">第三页</div><div class="page book-content book-content2">第二页</div><div class="page book-content book-content3">第一页</div><div class="page book-cover">封面</div></div> </div> </body> </html>

运行结果

总结

以上是生活随笔为你收集整理的前端学习（284）：纯css实现翻书效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。