Так что я пытаюсь создать виртуальную книгу в HTML5 и CSS3 без JS, что на самом деле работает нормально, но я не хочу, чтобы она выглядела как кусочки бумаги, которые вы переворачиваете, но я хочу, чтобы она выглядела как настоящая книга (по крайней мере, как можно более реальная). Поэтому я стараюсь показать позвоночник книги и обычный позвоночник книги на всех страницах. Затем я попытался вставить границу Darkblue и соответственно окрасить фон Darkblue, который работает на первой (и последней) двух страницах, а также отформатируется правильно, но как только я перевернул страницу, верхняя граница исчезает (но нижняя граница остается темной клейкой). < /P>
Далее, когда я пытаюсь изменить обратную кнопку с его значения. Я также пытался использовать целую страницу в качестве метки, так что, как только вы нажимаете на страницу, она перевернется, поэтому без кнопок, но это тоже не сработало. Как только вы нажимаете на него, он отображает «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
```
Так что я пытаюсь создать виртуальную книгу в HTML5 и CSS3 без JS, что на самом деле работает нормально, но я не хочу, чтобы она выглядела как кусочки бумаги, которые вы переворачиваете, но я хочу, чтобы она выглядела как настоящая книга (по крайней мере, как можно более реальная). Поэтому я стараюсь показать позвоночник книги и обычный позвоночник книги на всех страницах. Затем я попытался вставить границу Darkblue и соответственно окрасить фон Darkblue, который работает на первой (и последней) двух страницах, а также отформатируется правильно, но как только я перевернул страницу, верхняя граница исчезает (но нижняя граница остается темной клейкой). < /P> Далее, когда я пытаюсь изменить обратную кнопку с его значения. Я также пытался использовать целую страницу в качестве метки, так что, как только вы нажимаете на страницу, она перевернется, поэтому без кнопок, но это тоже не сработало. Как только вы нажимаете на него, он отображает «Lorem Ipsum 2» на правой стороне, а не обратно. Но все работает правильно на странице Lorem Ipsum 6 ... < /p> Вы видите, у меня есть несколько проблем, которые необходимо решить. Конечно, я также искал Интернет, чтобы найти помощь или решение в течение нескольких дней, но я не смог найти какого-либо функционирующего решения. Lang-HTML PrettyPrint-Override ">[code]```
Мобильная версия