<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page-Flip Book</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: sans-serif;
background: #f0f0f0;
height: 100vh;
justify-content: center;
}
.book {
position: relative;
width: 600px;
height: 400px;
perspective: 1200px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
background: #ececec;
}
.page {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform-origin: left;
transition: transform 0.8s ease-in-out;
}
.page .side {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #333;
}
.page .front {
background: #fff;
}
.page .back {
background: #fafafa;
transform: rotateY(180deg);
}
.page.flipped {
transform: rotateY(-180deg);
z-index: 0;
}
#page0 { z-index: 4; }
#page1 { z-index: 3; }
#page2 { z-index: 2; }
#page3 { z-index: 1; }
.controls {
margin-top: 20px;
}
.controls button {
padding: 10px 20px;
margin: 0 10px;
font-size: 1rem;
cursor: pointer;
border: none;
background: #333;
color: #fff;
border-radius: 4px;
transition: background 0.3s;
}
.controls button:hover {
background: #555;
}
</style>
</head>
<body>
<div class="book">
<div class="page" id="page0">
<div class="side front">Cover</div>
<div class="side back">Page 1</div>
</div>
<div class="page" id="page1">
<div class="side front">Page 2</div>
<div class="side back">Page 3</div>
</div>
<div class="page" id="page2">
<div class="side front">Page 4</div>
<div class="side back">Page 5</div>
</div>
<div class="page" id="page3">
<div class="side front">Page 6</div>
<div class="side back">Back Cover</div>
</div>
</div>
<div class="controls">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
<script>
const pages = [
document.getElementById('page0'),
document.getElementById('page1'),
document.getElementById('page2'),
document.getElementById('page3')
];
let current = 0;
document.getElementById('next').onclick = () => {
if (current < pages.length) {
pages[current].classList.add('flipped');
current++;
}
};
document.getElementById('prev').onclick = () => {
if (current > 0) {
current--;
pages[current].classList.remove('flipped');
}
};
</script>
</body>
</html>
