我正在学习 tutorial 了解如何使用 html 制作动画书。一切都很好，直到我到达翻转纸张的部分。出于某种原因，“back 1”出现在我的第二页而不是第一页上，所以当我将
backface-visibility.frontindex.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<title>Ice Cream Passport</title>
<link rel="stylesheet" href="./style.css">
<script src="./main.js" defer></script>
<script src="https://kit.fontawesome.com/7934507359.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Previous Button -->
<button id="prev-btn">
<i class="fa-solid fa-arrow-left"></i>
</button>
<!-- Book (passport) -->
<div id="book" class="book">
<!-- Paper 1 (cover) -->
<div id="p1" class="paper flipped">
<div class="front">
<div id="f1" class="front-content">
<h1>Front 1</h1>
</div>
</div>
<div id="back">
<div id="b1" class="back-content">
<h1>Back 1</h1>
</div>
</div>
</div>
<!-- Paper 2 (inside 1) -->
<div id="p2" class="paper">
<div class="front">
<div id="f2" class="front-content">
<h1>Front 2</h1>
</div>
</div>
<div id="back">
<div id="b2" class="back-content">
<h1>Back 2</h1>
</div>
</div>
</div>
<!-- Paper 3 (inside 2) -->
<div id="p3" class="paper">
<div class="front">
<div id="f3" class="front-content">
<h1>Front 3</h1>
</div>
</div>
<div id="back">
<div id="b3" class="back-content">
<h1>Back 3</h1>
</div>
</div>
</div>
</div>
<!-- Next Button -->
<button id="next-btn">
<i class="fa-solid fa-arrow-right"></i>
</button>
</body>
</html>
样式.css：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: serif;
background-color: gray;
}
/* Book */
.book {
position: relative;
width: 350px;
height: 500px;
}
.paper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
perspective: 1500px;
}
.front,
.back {
background-color: white;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform-origin: left;
transition: transform 0.5s;
}
.front {
z-index: 1; /* so the front page goes on top of the back page */
backface-visibility: hidden;
}
.back {
z-index: 0;
}
/* Contents of pages */
.front-content,
.back-content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* Paper flip effect */
.flipped .front,
.flipped .back {
transform: rotateY(-180deg)
}
/* Buttons */
button{
border: none;
background-color: transparent;
cursor: pointer;
margin: 10px;
}
button:focus {
outline: none;
}
button:hover i {
color: #636363;
}
i {
font-size: 50px;
color: black;
}
/* Paper stack order */
#p1 {
z-index: 3;
}
#p2 {
z-index: 2;
}
#p3 {
z-index: 1;
}