3D书籍点击翻转动画之内封面旋转异常问题咨询

我正在做一个用户点击触发的3D书籍开启动画，但是卡在内封面的旋转效果上了——总感觉哪里不对，就是找不出问题所在。我期望点击书籍后能实现这些效果：

• 书籍封面沿Y轴镜像翻转
• 右侧显示第一页，带有和封底背景一致的边框
• 内封面显示为和封面背景色一致的纯色封面
• 后续页面沿Y轴依次翻转

简单来说就是要做出用户点击后，书籍完整展开的3D动画效果。下面是我目前写的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opening Book with GSAP</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f4f8;
            overflow: hidden;
        }
        .font-serif {
            font-family: 'Playfair Display', serif;
        }
        /* The scene is the 3D space for the book */
        .scene {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            perspective: 2500px;
        }
        /* The wrapper handles positioning and can be clicked */
        .book-wrapper {
            position: relative;
            cursor: pointer;
        }
        /* The book container holds all the 3D pieces */
        .book {
            width: 350px;
            height: 500px;
            position: relative;
            transform-style: preserve-3d;
        }
        /* The front cover, which will flip open */
        .front-cover {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transform-origin: left center;
            transform-style: preserve-3d;
            z-index: 10;
        }
        .cover-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 0.5rem;
            background-color: #4a3a32;
        }
        .cover-face-front {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }
        /* The inside of the cover matches the outside */
        .cover-face-back {
            background-color: #4a3a32;
            transform: rotateY(-180deg);
        }
        /* Crease styles */
        .cover-face-front::before, .cover-face-front::after {
            content: '';
            position: absolute;
            top: 0;
            height: 100%;
            width: 2px;
            background-color: rgba(0, 0, 0, 0.2);
            box-shadow: 1px 0 5px rgba(0, 0, 0, 0.35);
        }
        .cover-face-front::before {
            left: 31px;
        }
        .cover-face-front::after {
            left: 35px;
        }
        /* NEW: This is the actual back cover board */
        .back-cover {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: #4a3a32;
            border-radius: 0.5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
        /* The static page block that sits on top of the back cover */
        .pages {
            position: absolute;
            width: calc(100% - 1rem);
            height: calc(100% - 1rem);
            top: 0.5rem;
            left: 0.5rem;
            background-color: #f3f0e9;
            border-radius: 0.25rem;
            z-index: 5;
        }
        /* Styles for the flipping pages */
        .flipping-page {
            position: absolute;
            width: calc(100% - 1rem);
            height: calc(100% - 1rem);
            top: 0.5rem;
            left: 0.5rem;
            background-color: #fdfaf2;
            transform-origin: left center;
            border-radius: 0.25rem;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1) inset;
            border-right: 1px solid #e0d9cd;
            z-index: 6;
        }
        /* Decorative elements */
        .cover-design {
            border: 4px double #d4af37;
            width: 100%;
            height: 100%;
            border-radius: 0.25rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 1rem;
            color: #d4af37;
        }
        .cover-title {
            font-family: 'Playfair Display', serif;
            font-size: 2.75rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
        }
        .cover-author {
            margin-top: 1.5rem;
            font-size: 1.125rem;
            font-style: italic;
            border-top: 1px solid rgba(212, 175, 55, 0.5);
            padding-top: 1.5rem;
        }
    </style>
</head>
<body>
    <div class="scene">
        <!-- The new wrapper handles positioning -->
        <div id="book-wrapper" class="book-wrapper">
            <!-- The book itself only handles 3D animations -->
            <div id="book" class="book">
                <!-- NEW: Added a dedicated back cover element -->
                <div class="back-cover"></div>
                <div class="pages"></div>
                <div class="flipping-page" id="page-3"></div>
                <div class="flipping-page" id="page-2"></div>
                <div class="flipping-page" id="page-1"></div>
                <div class="front-cover">
                    <div class="cover-face cover-face-front">
                        <div class="cover-design">
                            <h1 class="cover-title">About the Author</h1>
                            <p class="cover-author"></p>
                        </div>
                    </div>
                    <div class="cover-face cover-face-back"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

有没有大佬能帮我看看内封面的旋转哪里出问题了？麻烦指点一下，谢谢！

内容来源于stack exchange