仿真翻页书HTML源码
https://www.bootstrapmb.com/item/14742
创建一个仿真的翻页书效果在HTML和CSS中可以通过多种方式实现，但通常这也会涉及到JavaScript（或jQuery）来处理交互和动画。以下是一个简单的示例，展示如何使用HTML、CSS和JavaScript来创建一个基本的翻页书效果。
请注意，这个示例是一个简化的版本，真实的翻页书效果可能会更复杂，并且可能需要使用专门的库或框架来实现。
HTML:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿真翻页书</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="book">
<div class="page left">页面 1</div>
<div class="page right">页面 2</div>
<!-- 更多的页面... -->
</div>
<button onclick="turnPage()">翻页</button>
<script src="script.js"></script>
</body>
</html>CSS (styles.css):
css.book {
position: relative;
width: 300px;
height: 200px;
perspective: 1000px; /* 为3D变换设置视角 */
transform-style: preserve-3d; /* 保持子元素的3D变换 */
}
.page {
position: absolute;
width: 100%;
height: 100%;
background-color: #ddd;
border: 1px solid #000;
box-sizing: border-box;
transition: transform 1s; /* 平滑的翻页动画 */
}
.left {
transform: rotateY(0deg) translateZ(50px); /* 初始位置 */
background-color: #f00;
}
.right {
transform: rotateY(180deg) translateZ(50px); /* 初始位置 */
background-color: #0f0;
}
.flipped .left {
transform: rotateY(-180deg) translateZ(50px); /* 翻页后的位置 */
}
.flipped .right {
transform: rotateY(0deg) translateZ(50px); /* 翻页后的位置 */
}JavaScript (script.js):
javascriptfunction turnPage() {
var book = document.querySelector('.book');
book.classList.toggle('flipped'); // 切换类名以应用不同的变换
}这个示例中，我们创建了一个包含两页的“书”。通过点击按钮，我们可以触发一个JavaScript函数来切换书籍的类名，从而应用不同的CSS变换来模拟翻页效果。但是，请注意，这只是一个非常基础的示例，真实的翻页书效果可能会涉及更复杂的动画和交互。
