创建一本带有翻页功能的纯 HTML/CSS 书籍

Question

所以我试图用 HTML5 和 CSS3 创建一本完全不需要 JS 的虚拟书，实际上工作得很好，但我不希望它看起来像一张翻过来的纸，但我希望它看起来像一本真正的书（至少尽可能真实）。所以我尝试在所有页面上显示书的封面书脊和书的正常书脊。

我已经尝试将首页设为深蓝色并变大，但没有带来预期的效果。然后，我尝试插入深蓝色边框并将背景着色为深蓝色，这适用于前两页（和最后两页）并且格式也正确，但一旦我进一步翻转页面，顶部边框就会消失（但底部边框仍然存在）深蓝色）。

此外，当我尝试将后退按钮的值从右 13px 更改为左 13px 时，该按钮在 Chrome 中不再起作用。我还尝试使用整个页面作为标签，这样只要你点击一个页面，它就会翻转，所以没有按钮，但这也不起作用。

此外，Firefox 中的后退按钮在“Lorem ipsum 7”和“Lorem ipsum 8”页面上不起作用。一旦你点击它，它就会在右侧显示“Lorem ipsum 2”，而不是正确翻转回来。但直到 Lorem ipsum 6 页面一切正常...

你看我有一些问题需要解决。当然，我也上网搜索了几天寻求帮助或解决方案，但找不到任何有效的解决方案。

我希望有人能帮助我让它看起来和功能更像一本真正的书。

```

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-family: sans-serif;
background: lightblue;
}

input {
display: none;
}
img {
width: 100%;
margin-top:15px;
}
h1 {
font-size: 26px;
}
h2 {
margin-top: 65px;
font-size: 22px;
}
.book {
display: flex;
}
#cover {
width: 400px;
height: 550px;
}
.flip-book {
width: 400px;
height: 550px;
position: relative;
perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: center left;
transform-style: preserve-3d;
transition: 0.5s;
color: #000;
}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 1px #f0f0f0;
border-left-style: dashed;
background-color: #fff;
box-sizing: border-box;
padding: 0 13px;
}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
}
.next-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
.back-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
#p1 {
z-index: 5;
}
#p2 {
z-index: 4;
}
#p3 {
z-index: 3;
}
#p4 {
z-index: 2;
}
#p5 {
z-index: 1;
}
#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}
#c4:checked ~ .flip-book #p4 {
transform: rotateY(-180deg);
z-index: 4;
}
#c5:checked ~ .flip-book #p5 {
transform: rotateY(-180deg);
z-index: 5;
}
</style>
</head>
<body>

<div class="book">
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3">
<input type="checkbox" id="c4">
<input type="checkbox" id="c5">

<div id="cover"></div>
<div class="flip-book">

<div class="flip" id="p1">
<div class="back" style="border: 5px darkblue; border-top-style: solid;border-left-style: solid;border-bottom-style: solid;">

<h2>Lorem ipsum 1</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c1">Back</label>
</div>
<div class="front" style="height: 560px; width: 405px; background:darkblue; color:white; border: 5px darkblue; border-top-style: solid;border-right-style: solid;border-bottom-style: solid;">
<img src="https://kibls.neocities.org/schachbrettwhite.jpg" alt="Chessboard white">
<h1>Poetry Collection</h1>
<h2>Lorem ipsum book</h2>
<h3>E-book number 1</h3>
<label class="next-btn" for="c1" style="color:white;border:1px solid white;">Open</label>
</div>
</div>

<div class="flip" id="p2">
<div class="back">

<h2>Lorem ipsum 3</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c2">Back</label>
</div>
<div class="front">

<h2>Lorem ipsum 2</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c2">Next</label>
</div>
</div>

<div class="flip" id="p3">
<div class="back">

<h2>Lorem ipsum 5</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c3">Back</label>
</div>
<div class="front">

<h2>Lorem ipsum 4</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c3">Next</label>
</div>
</div>

<div class="flip" id="p4">
<div class="back">

<h2>Lorem ipsum 7</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c4">Back</label>
</div>

<div class="front">

<h2>Lorem ipsum 6</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c4">Next</label>
</div>
</div>

<div class="flip" id="p5">
<div class="back" style="color:white; background:darkblue; border: 5px solid darkblue; border-top-style: solid;border-right-style: solid;border-bottom-style: solid;">
End of the book
<label class="back-btn" for="c5" style="color:white;border:1px solid white;">Back</label>
</div>
<div class="front" style="height: 560px; width: 405px; border: 5px darkblue; border-top-style: solid;border-right-style: solid;border-bottom-style: solid;">

<h2>Lorem ipsum 8</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c5">Next</label>
</div>
</div>

</div>
</div>
</body>
</html>

```

Answer 1

所以我能够为您解决边界问题。你的高度之间存在一些不一致，有些是

550px

，有些是

560px

，在内联html中与宽度相同，有些是

，有些是

，我把它们都做了

。我还删除了所有内联 html 边框并简单地添加了：

border-top: 5px solid darkblue;
border-right: 5px solid darkblue;
border-bottom: 5px solid darkblue;
border-left: 1px dashed #f0f0f0;

到CSS中的

.flip

（我还删除了

.front

的边框）

这是一个工作示例：

编辑：删除：

border-top: 5px solid darkblue;
border-right: 5px solid darkblue;
border-bottom: 5px solid darkblue;

这样页面就没有边框了。

编辑 2：我找到了一个解决方法，可以让后退按钮在 Firefox 中正常工作。我将此代码添加到您的 CSS 中：

#c3:checked ~ .flip-book #p1 {
display: none;
}
#c4:checked ~ .flip-book #p2 {
display: none;
}
#c5:checked ~ .flip-book #p3 {
display: none;
}

本质上，它的作用是摆脱“不可见”页面，并且不存在会导致 Firefox 和 Chrome 出现问题的重叠和转换复选框。

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-family: sans-serif;
background: lightblue;
}

input {
display: none;
}
img {
width: 100%;
margin-top:15px;
}
h1 {
font-size: 26px;
}
h2 {
margin-top: 65px;
font-size: 22px;
}
.book {
display: flex;
}
#cover {
width: 400px;
height: 550px;
}
.flip-book {
width: 400px;
height: 550px;
position: relative;
perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: center left;
transform-style: preserve-3d;
transition: 0.5s;
color: #000;
border-left: 1px dashed #f0f0f0;
}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
box-sizing: border-box;
padding: 0 13px;

}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
}
.next-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
.back-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
#p1 {
z-index: 5;
}
#p2 {
z-index: 4;
}
#p3 {
z-index: 3;
}
#p4 {
z-index: 2;
}
#p5 {
z-index: 1;
}
#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}
#c4:checked ~ .flip-book #p4 {
transform: rotateY(-180deg);
z-index: 4;
}
#c5:checked ~ .flip-book #p5 {
transform: rotateY(-180deg);
z-index: 5;
}

#c3:checked ~ .flip-book #p1 {
display: none;
}
#c4:checked ~ .flip-book #p2 {
display: none;
}
#c5:checked ~ .flip-book #p3 {
display: none;
}



</style>
</head>
<body>

<div class="book">
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3">
<input type="checkbox" id="c4">
<input type="checkbox" id="c5">

<div id="cover"></div>
<div class="flip-book">

<div class="flip" id="p1">
<div class="back" style="">

<h2>Lorem ipsum 1</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c1">Back</label>
</div>
<div class="front" style="height: 550px; width: 400px; background:darkblue; color:white;">
<img src="https://kibls.neocities.org/schachbrettwhite.jpg" alt="Chessboard white">
<h1>Poetry Collection</h1>
<h2>Lorem ipsum book</h2>
<h3>E-book number 1</h3>
<label class="next-btn" for="c1" style="color:white;border:1px solid white;">Open</label>
</div>
</div>

<div class="flip" id="p2">
<div class="back">

<h2>Lorem ipsum 3</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c2">Back</label>
</div>
<div class="front">

<h2>Lorem ipsum 2</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c2">Next</label>
</div>
</div>

<div class="flip" id="p3">
<div class="back">

<h2>Lorem ipsum 5</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c3">Back</label>
</div>
<div class="front">

<h2>Lorem ipsum 4</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c3">Next</label>
</div>
</div>

<div class="flip" id="p4">
<div class="back">

<h2>Lorem ipsum 7</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c4">Back</label>
</div>

<div class="front">

<h2>Lorem ipsum 6</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c4">Next</label>
</div>
</div>

<div class="flip" id="p5">
<div class="back" style="color:white; background:darkblue; ">
End of the book
<label class="back-btn" for="c5" style="color:white;border:1px solid white;">Back</label>
</div>
<div class="front" style="height: 550px; width: 400px;">

<h2>Lorem ipsum 8</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c5">Next</label>
</div>
</div>

</div>
</div>
</body>
</html>

编辑3：所以我假设你仍然想要背景中的边框，而不是右转时的页面？所以我所做的就是添加一个带有

div

类的虚拟

bb

并将其

width

和

height

设置为与书相同，并将其

z-index

设置为

-1

所以它现在在后台并给出仅当选中内部页面复选框时才显示边框，并在显示最终封面时将其删除。

这是我添加到 CSS 中的内容（还在 html 中的复选框下方添加了

<div class="bb"></div>

）

.bb{
  position: absolute;
  z-index: -1;
  width: 800px;
  height: 550px;
 pointer-events: none;

}

#c1:checked ~ .bb {
border: 5px solid darkblue;
}
#c2:checked ~ .bb {
border: 5px solid darkblue;
}
#c3:checked ~ .bb {
border: 5px solid darkblue;
}
#c4:checked ~ .bb {
border: 5px solid darkblue;
}
#c5:checked ~ .bb {
border: none;
}

这是一个工作示例。我真的希望这就是您正在寻找的

<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align:center;
font-family: sans-serif;
background: lightblue;
}

input {
display: none;
}
img {
width: 100%;
margin-top:15px;
}
h1 {
font-size: 26px;
}
h2 {
margin-top: 65px;
font-size: 22px;
}
.book {
display: flex;
}
#cover {
width: 400px;
height: 550px;
}
.flip-book {
width: 400px;
height: 550px;
position: relative;
perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: center left;
transform-style: preserve-3d;
transition: 0.5s;
color: #000;

}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
box-sizing: border-box;
padding: 0 13px;

}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
}
.next-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
.back-btn {
position: absolute;
border: 2px solid black;
border-radius: 10px;
padding: 4px;
bottom: 13px;
right: 13px;
cursor: pointer;
color: #000;
}
#p1 {
z-index: 5;
margin: 5px;
}
#p2 {
z-index: 4;
margin: 5px;
}
#p3 {
z-index: 3;
margin: 5px;
}
#p4 {
z-index: 2;
margin: 5px;
}
#p5 {
z-index: 1;
margin: 5px;
}
#c1:checked ~ .flip-book #p1 {
transform: rotateY(-180deg);
z-index: 1;
}
#c2:checked ~ .flip-book #p2 {
transform: rotateY(-180deg);
z-index: 2;
}
#c3:checked ~ .flip-book #p3 {
transform: rotateY(-180deg);
z-index: 3;
}
#c4:checked ~ .flip-book #p4 {
transform: rotateY(-180deg);
z-index: 4;
}
#c5:checked ~ .flip-book #p5 {
transform: rotateY(-180deg);
z-index: 5;
}

#c3:checked ~ .flip-book #p1 {
display: none;
}
#c4:checked ~ .flip-book #p2 {
display: none;
}
#c5:checked ~ .flip-book #p3 {
display: none;
}


.bb{
  position: absolute;
  z-index: -1;
  width: 800px;
  height: 550px;
 pointer-events: none;

}

#c1:checked ~ .bb {
border: 5px solid darkblue;
background-color: white;
}
#c2:checked ~ .bb {
border: 5px solid darkblue;
}
#c3:checked ~ .bb {
border: 5px solid darkblue;
}
#c4:checked ~ .bb {
border: 5px solid darkblue;
}
#c5:checked ~ .bb {
border: none;
background-color: transparent;
}






</style>
</head>
<body>

<div class="book">
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3">
<input type="checkbox" id="c4">
<input type="checkbox" id="c5">

<div class="bb"></div>

<div id="cover"></div>
<div class="flip-book">

<div class="flip" id="p1">
<div class="back" style="">

<h2>Lorem ipsum 1</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c1">Back</label>
</div>
<div class="front" style="height: 550px; width: 400px; background:darkblue; color:white;">
<img src="https://kibls.neocities.org/schachbrettwhite.jpg" alt="Chessboard white">
<h1>Poetry Collection</h1>
<h2>Lorem ipsum book</h2>
<h3>E-book number 1</h3>
<label class="next-btn" for="c1" style="color:white;border:1px solid white;">Open</label>
</div>
</div>

<div class="flip" id="p2">
<div class="back">

<h2>Lorem ipsum 3</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c2">Back</label>
</div>
<div class="front">

<h2>Lorem ipsum 2</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c2">Next</label>
</div>
</div>

<div class="flip" id="p3">
<div class="back">

<h2>Lorem ipsum 5</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c3">Back</label>
</div>
<div class="front">

<h2>Lorem ipsum 4</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c3">Next</label>
</div>
</div>

<div class="flip" id="p4">
<div class="back">

<h2>Lorem ipsum 7</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="back-btn" for="c4">Back</label>
</div>

<div class="front">

<h2>Lorem ipsum 6</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c4">Next</label>
</div>
</div>

<div class="flip" id="p5">
<div class="back" style="color:white; background:darkblue; ">
End of the book
<label class="back-btn" for="c5" style="color:white;border:1px solid white;">Back</label>
</div>
<div class="front" style="height: 550px; width: 400px;">

<h2>Lorem ipsum 8</h2><br>

Lorem ipsum dolor sit amet, <br>
consetetur sadipscing elitr, <br><br>

sed diam nonumy eirmod tempor <br>
invidunt ut labore et dolore <br><br>

magna aliquyam erat, sed diam <br>
voluptua. At vero eos et accusam <br><br>

et justo duo dolores et ea rebum. <br>
Stet clita kasd gubergren, no sea <br><br>

takimata sanctus est Lorem ipsum <br>
dolor sit amet. Lorem ipsum dolor <br><br>

sit amet<br>
<label class="next-btn" for="c5">Next</label>
</div>
</div>

</div>
</div>
</body>
</html>

Answer 2

这是基于此答案的纯动画 CSS3 翻页书，它使用

type="radio"

按钮和

label

（作为可点击的透明页面覆盖）。
单击标签时，相应的 INPUT 会切换

:checked

状态，相反，这会更改

--c

CSS 属性

的值

* { box-sizing: border-box; }

body {
  /* or any other parent wrapper */
  margin: 0;
  display: flex;
  height: 100dvh;
  perspective: 1000px;
  font: 16px/1.4 sans-serif;
  overflow: hidden;
  background-color: #232425;
}

.book {
  --c: 0;
  display: flex;
  margin: auto;
  width: 300px;
  /*1* let pointer event go trough pages of lower Z than .book */
  pointer-events: none;
  transform-style: preserve-3d;
  transition: translate 1s;
  translate: calc(min(var(--c), 1) * 50%) 0%;
  /* DEMO ONLY: incline on the X axis for pages preview */
  rotate: 1 0 0 30deg;

  [name^=book] { display: none; }
  &:has(#c0:checked) { --c:0; }
  &:has(#c1:checked) { --c:1; }
  &:has(#c2:checked) { --c:2; }
  &:has(#c3:checked) { --c:3; }
  &:has(#c4:checked) { --c:4; }
  &:has(#c5:checked) { --c:5; }
}

.page {
  --thickness: 5;
  /* PS: Don't go below thickness 0.4 or the pages might transpare */
  flex: none;
  display: flex;
  width: 100%;
  /*1* allow pointer events on pages */
  pointer-events: all;
  user-select: none;
  transform-style: preserve-3d;
  border: 1px solid #0008;
  transform-origin: left center;
  transition:
    transform 1s,
    rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
  translate: calc(var(--i) * -100%) 0px 0px;
  transform: translateZ( calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * 1px)));
  rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);

  label {
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}



.front,
.back {
  flex: none;
  width: 100%;
  padding: 2rem;
  backface-visibility: hidden;
  background-color: #fff;
  /* Fix backface visibility Firefox: */
  translate: 0px;
}

.back {
  background-image: linear-gradient(to right, #fff 80%, #ddd 100%);
  translate: -100% 0;
  rotate: 0 1 0 180deg;
}

<div class="book">
  
  <input type="radio" name="book-1" id="c0">
  <input type="radio" name="book-1" id="c1">
  <input type="radio" name="book-1" id="c2">
  <input type="radio" name="book-1" id="c3">
  <input type="radio" name="book-1" id="c4">
  <input type="radio" name="book-1" id="c5">

  <div class="page" style="--i:0;">
    <div class="front">
      <label for="c1"></label>
      <h1>FlipBook</h1>
      <h3>2023.<br>Second edition</h3>
    </div>
    <div class="back">
      <label for="c0"></label>
      <h2>Lorem Ipsum</h2>
      1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, modi, perspiciatis molestias cum neque delectus eum eveniet repellat iusto totam magnam cupiditate quaerat quis.
    </div>
  </div>

  <div class="page" style="--i:1;">
    <div class="front">
      <label for="c2"></label>
      2. Dolor Molestias aspernatur repudiandae sed quos debitis recusandae consectetur ab facilis voluptates sint vero eos, consequuntur delectus?
    </div>
    <div class="back">
      <label for="c1"></label>
      <img src="https://picsum.photos/500/400" alt="Img 1">
    </div>
  </div>

  <div class="page" style="--i:2;">
    <div class="front">
      <label for="c3"></label>
      <h2>Sit amet</h2>
      4. Consectetur adipisicing elit. Dignissimos illo voluptate sapiente provident tempore ea voluptates perferendis tenetur eos nulla, doloribus! Distinctio a nostrum ipsum, adipisci at mollitia.
    </div>
    <div class="back">
      <label for="c2"></label>
      5. Debitis recusandae consectetur ab facilis voluptates sint vero eos, consequuntur delectus temporibus harum dolorem provident eaque perferendis.
    </div>
  </div>

  <div class="page" style="--i:3;">
    <div class="front">
      <label for="c4"></label>
      <h2>Consectetur</h2>
      6. Adipisicing elit. Sed, fuga aspernatur? Numquam, molestias unde! Voluptatibus sint aspernatur qui dolore est itaque ipsum consequuntur neque asperiores non obcaecati harum, perspiciatis voluptate!
    </div>
    <div class="back">
      <label for="c3"></label>
      7. Temporibus, eum nobis? Adipisci, a? Eaque vel amet ut reprehenderit.
    </div>
  </div>

  <div class="page" style="--i:4;">
    <div class="front">
      <label for="c5"></label>
      <img src="https://picsum.photos/536/354" alt="Img 2">
    </div>
    <div class="back">
      <label for="c4"></label>
      <h3>Finalis</h3>
      9. Lorem ipsum dolor sit, amet consectetur adipisicing elit. code by Roko, eniam vero, magni dignissimos deleniti hic ratione sequi ullam eos.
    </div>
  </div>
</div>

创建一本带有翻页功能的纯 HTML/CSS 书籍

问题描述投票：0回答：2

2个回答

最新问题

创建一本带有翻页功能的纯 HTML/CSS 书籍

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2