js手机端翻书效果代码

要实现一个JavaScript手机端翻书效果，可以使用CSS3的3D变换和动画特性，结合JavaScript来控制页面的翻页效果。以下是一个简单的示例代码，展示了如何实现这一效果：

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" id="page1">第一页内容</div>
        <div class="page" id="page2">第二页内容</div>
        <div class="page" id="page3">第三页内容</div>
        <!-- 可以继续添加更多页面 -->
    </div>
    <button onclick="prevPage()">上一页</button>
    <button onclick="nextPage()">下一页</button>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body {
    perspective: 1000px;
}

.book {
    position: relative;
    width: 300px;
    height: 400px;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.page {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid #ccc;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.page:nth-child(odd) {
    transform: rotateY(0deg);
}

.page:nth-child(even) {
    transform: rotateY(180deg);
}

JavaScript逻辑

// script.js
let currentPage = 1;
const pages = document.querySelectorAll('.page');

function updateBookTransform() {
    const angle = (currentPage - 1) * 180;
    document.querySelector('.book').style.transform = `rotateY(${angle}deg)`;
}

function nextPage() {
    if (currentPage < pages.length) {
        currentPage++;
        updateBookTransform();
    }
}

function prevPage() {
    if (currentPage > 1) {
        currentPage--;
        updateBookTransform();
    }
}

解释

HTML结构：创建一个包含多个页面的书籍容器，每个页面是一个div元素。
CSS样式：
- 使用perspective属性给父容器添加3D空间感。
- 每个页面使用backface-visibility: hidden来隐藏背面，确保翻转时不会看到背面的内容。
- 奇数页默认正面朝上，偶数页默认背面朝上。