Chapter 1
Once upon a time...
Chapter 2
The journey begins.
Chapter 3
The mystery deepens.
Chapter 4
The story unfolds.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Realistic Book Animation</title>
<style>
body{
margin:0;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:#c9c9c9;
font-family:Georgia, serif;
}
.scene{
perspective:2200px;
}
.book{
width:360px;
height:480px;
position:relative;
transform-style:preserve-3d;
}
/* spine */
.spine{
position:absolute;
width:30px;
height:100%;
background:#5b2c06;
left:-30px;
transform:rotateY(90deg);
transform-origin:right;
}
/* pages */
.page{
position:absolute;
width:100%;
height:100%;
background:#fffdf7;
transform-origin:left;
transform-style:preserve-3d;
transition:transform 1.4s ease;
box-shadow:
inset 0 0 30px rgba(0,0,0,0.15),
8px 0 25px rgba(0,0,0,0.25);
backface-visibility:hidden;
padding:30px;
box-sizing:border-box;
}
.page::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to right,
rgba(0,0,0,0.25),
rgba(0,0,0,0)
);
pointer-events:none;
}
/* layering */
.page:nth-child(1){z-index:5;}
.page:nth-child(2){z-index:4;}
.page:nth-child(3){z-index:3;}
.page:nth-child(4){z-index:2;}
.page.flip{
transform:rotateY(-180deg);
}
/* controls */
.controls{
position:absolute;
bottom:-70px;
width:100%;
text-align:center;
}
button{
padding:10px 18px;
border:none;
background:#5b2c06;
color:#fff;
cursor:pointer;
border-radius:4px;
}
button:hover{opacity:.85}
</style>
</head>
<body>
<div class="scene">
<div class="book">
<div class="spine"></div>
<div class="page">
<h2>Chapter 1</h2>
<p>Once upon a time...</p>
</div>
<div class="page">
<h2>Chapter 2</h2>
<p>The journey begins.</p>
</div>
<div class="page">
<h2>Chapter 3</h2>
<p>The mystery deepens.</p>
</div>
<div class="page">
<h2>Chapter 4</h2>
<p>The story unfolds.</p>
</div>
<div class="controls">
<button onclick="next()">Next Page</button>
<button onclick="prev()">Prev Page</button>
</div>
</div>
</div>
<script>
const pages = document.querySelectorAll('.page');
let index = 0;
function next(){
if(index < pages.length){
pages[index].classList.add('flip');
index++;
}
}
function prev(){
if(index > 0){
index--;
pages[index].classList.remove('flip');
}
}
</script>
</body>
</html>