纯CSS3实现真实翻书效果

最新推荐文章于 2025-07-15 15:35:54 发布

白小宇

最新推荐文章于 2025-07-15 15:35:54 发布

阅读量1w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： web前端 CSS 文章标签： html CSS3实现翻书效果

本文链接：https://blog.youkuaiyun.com/b954960630/article/details/53433796

本文通过CSS3的3D transform变换和@keyframes规则，详细介绍了如何创建一个真实的翻书效果，包括HTML结构和CSS样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：

（1）（2）翻页

（3）

HTML

<html>
<head>
<meta charset="UTF-8">
<title>纯CSS3实现真实翻书效果</title>
<link rel="stylesheet" href="css/page-style.css"> 
</head>
<body>
	<div class="book preserve-3d">

		<div class="book-page-box">
			<div class="book-page">
				<p>第三页</p>
			</div>
		</div>

		<div class="flip-animation-3 point">
			<div class="book-page">
				<p>第二页</p>
			</div>
		</div>

		<div class="flip-animation-2 point">
			<div class="book-page">
				<p>第一页</p>
			</div>
		</div>

		<div class="flip-animation-1 point">
			<div class="book-page first-page">
				<p>I'm <br>the home page</p>
			</div>
		</div>

	</div>
</body>
</html>

CSS

* {
	padding: 0;
	margin: 0;
}
body {
	background-color: #212121;
	font-family: '微软雅黑';
}
.book{
	height: 300px;
	width: 300px;
	background: #FFF;
	position: a