Далее, когда я пытаюсь изменить обратную кнопку с его значения. Я также пытался использовать целую страницу в качестве метки, так что, как только вы нажимаете на страницу, она перевернется, поэтому без кнопок, но это тоже не сработало. Как только вы нажимаете на него, он отображает «Lorem Ipsum 2» на правой стороне, а не обратно. Но все работает правильно на странице Lorem Ipsum 6 ... < /p>
Вы видите, у меня есть несколько проблем, которые необходимо решить. Конечно, я также искал Интернет, чтобы найти помощь или решение в течение нескольких дней, но я не смог найти какого-либо функционирующего решения. Lang-HTML PrettyPrint-Override ">
Код: Выделить всё
```
My example Website
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;
}
Lorem ipsum 1
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore
magna aliquyam erat, sed diam
voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor
sit amet
Back
[img]https://kibls.neocities.org/schachbrettwhite.jpg[/img]
Poetry Collection
Lorem ipsum book
E-book number 1
Open
Lorem ipsum 3
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore
magna aliquyam erat, sed diam
voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor
sit amet
Back
Lorem ipsum 2
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore
magna aliquyam erat, sed diam
voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor
sit amet
Next
Lorem ipsum 5
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore
magna aliquyam erat, sed diam
voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor
sit amet
Back
Lorem ipsum 4
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore
magna aliquyam erat, sed diam
voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor
sit amet
Next
Lorem ipsum 7
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore
magna aliquyam erat, sed diam
voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor
sit amet
Back
Lorem ipsum 6
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore
magna aliquyam erat, sed diam
voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor
sit amet
Next
End of the book
Back
Lorem ipsum 8
Lorem ipsum dolor sit amet,
consetetur sadipscing elitr,
sed diam nonumy eirmod tempor
invidunt ut labore et dolore
magna aliquyam erat, sed diam
voluptua. At vero eos et accusam
et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor
sit amet
Next
```Подробнее здесь: https://stackoverflow.com/questions/736 ... ping-pages
