效果图：
话不多说，直接上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纯css3实现翻书效果</title> <link href="reset.css" rel="stylesheet" type="text/css"> <style> *{ box-sizing: border-box; margin: 0; padding: 0; } .perspective { margin-top: 100px; perspective: 800px; transform-style: preserve-3d; } .book-wrap { width: 100px; height: 60px; position: relative; margin: 0 auto; transform: rotateX(30deg); transform-style: preserve-3d; } .page { position: absolute; top: 0; display: flex; justify-content: center; align-items: center; border: 5px solid #bc3442; background-color: #bc3442; border-radius: 4%; } .book-cover-first{ left: 0; width: 50%; height: 100%; } .book-cover-first .left-content{ width: calc(100% + 5px); height: 100%; box-shadow: 0px 5px #FFCC99; position: absolute; top: -5px; left: 0px; border-radius: 4%; background-color: #FFF6D9; } .book-cover-first .left-content .page-item{ width: 100%; height: 100%; background-color: #FFF6D9; border-radius: 4%; padding: 5px; display: flex; flex-direction: column; align-items: flex-end; } .book-cover-end{ right: 0; width: 50%; height: 100%; } .book-cover-end .right-content{ width: calc(100% + 5px); height: 100%; box-shadow: 0px 5px #FFCC99; position: absolute; top: -5px; right: 0px; border-radius: 4%; background-color: #FFF6D9; } .book-cover-end .right-content .page-item{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #FFF6D9; animation: roll 2s ease 0s infinite; transform-origin: left; border-radius: 4%; border: 1px solid #FFCC99; padding: 5px; } .book-cover-end .right-content .page-cover{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: #FFF6D9; border-radius: 4%; border: 1px solid #FFCC99; padding: 5px; } .page-line{ height: 4px; border-radius: 2px; margin-bottom: 4px; background-color: #FFCC99; } @keyframes roll { from {transform: rotateY(0)} to {transform: rotateY(-180deg)} } </style> </head> <body> <div class="perspective"> <div class="book-wrap"> <div class="page book-cover-first"> <div class="left-content"> <div class="page-item"> <div class="page-line" style="width: 100%;"></div> <div class="page-line" style="width: 30%;"></div> <div class="page-line" style="width: 70%;"></div> <div class="page-line" style="width: 50%;"></div> <div class="page-line" style="width: 10%;"></div> </div> </div> </div> <div class="page book-cover-end"> <div class="right-content"> <div class="page-item"> <div class="page-line" style="width: 100%;"></div> <div class="page-line" style="width: 30%;"></div> <div class="page-line" style="width: 70%;"></div> <div class="page-line" style="width: 50%;"></div> <div class="page-line" style="width: 10%;"></div> </div> <div class="page-cover"> <div class="page-line" style="width: 100%;"></div> <div class="page-line" style="width: 30%;"></div> <div class="page-line" style="width: 70%;"></div> <div class="page-line" style="width: 50%;"></div> <div class="page-line" style="width: 10%;"></div> </div> </div> </div> </div> </div> </body> </html>
