前端学习（284）：纯css实现翻书效果
生活随笔
收集整理的這篇文章主要介紹了
前端学习（284）：纯css实现翻书效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>純css3實(shí)現(xiàn)翻書效果</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>
運(yùn)行結(jié)果
總結(jié)
以上是生活随笔為你收集整理的前端学习（284）：纯css实现翻书效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Excel任务该如何在FineReade
- 下一篇： ux设计师薪水_公司与 设计机构：UX设