<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS3实现逼真的翻书效果 - 网页模板</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div style="height:500px; width:100%; position:relative;">
<!-- 书的主体 -->
<div class="book preserve-3d">
<!-- 书的最后一页 -->
<div class="book-page-box book-page-4 preserve-3d">
<div class="book-page page-front">
<p>第三页</p>
</div>
</div>
<!-- 书的第三页 -->
<div class="book-page-box book-page-3 preserve-3d flip-animation-3">
<div class="book-page page-front">
<p>第二页</p>
</div>
</div>
<!-- 书的第二页 -->
<div class="book-page-box book-page-2 preserve-3d flip-animation-2">
<div class="book-page page-front">
<p>第一页</p>
</div>
</div>
<!-- 书的封面 -->
<div class="book-page-box book-page-1 preserve-3d flip-animation-1">
<div class="book-page page-front">
<p>
翻页特效
<br>
flip-book
</p>
</div>
</div>
</div>
</div>
<div style="text-align:center;margin:20px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
