3D -анимация открытия книги - неожиданное ротация ⇐ Javascript

[Anonymous]

Я знаю, что что-то упускаю с вращением внутренней обложки, когда книга «нажимается на», чтобы открыть, но я не вижу ее. Напоминает фон задней обложки. < /li>
Внутренняя обложка отображается как сплошная обложка, которая соответствует цвету фона передней обложки.

Код: Выделить всё

Opening Book with GSAP






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;
}














About the Author









// Select the elements to animate
const bookWrapper = document.getElementById('book-wrapper');
const frontCover = document.querySelector('.front-cover');
const flippingPages = gsap.utils.toArray('.flipping-page');

// Set the default transform origin for the cover and pages
gsap.set([frontCover, flippingPages], { transformOrigin: "left center" });

// Create a GSAP timeline, paused by default
const timeline = gsap.timeline({ paused: true });

// Add animations to the timeline
timeline
// 1. Move the entire book wrapper to the right to center the spine
.to(bookWrapper, {
x: 175,
duration: 1.2,
ease: "power2.inOut"
})
// 2. Flip the cover open at the same time
.to(frontCover, {
rotationY: -180,
duration: 1.2,
ease: "power2.inOut"
}, " < /p> 

Подробнее здесь: [url]https://stackoverflow.com/questions/79683913/3d-animation-of-a-book-opening-unexpected-rotation[/url]