<!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>运行结果
