So my problem is the following; it seesm that I have found a bug in Firefox and as soon as I add another page, the flipping effect in firefox browser doesn't work at all anymore. In Chrome and other browsers I can easily add 15-20 (or even more) pages but as soon as I add the 7th flip page in Firefox, firefox is not working correct anymore.
I tried now many different examples from YT and Codepen and everytime with the same results. Sometimes it works until page 12, sometimes only until page 7. I guess it depends on the code. But all the time only Firefox is affected...
I have inserted both versions to save you some work. The top code is working fine in all browsers and the bottom code (with only 1 page more) does not work in Firefox at all.
And below the first example I added a second example where you have to add one more page manually (because stackoverflow allow only 30.000 characters per post).
So; many thanks for your help in advance! Is there any workaround or trick that I could use that the templates work in all browsers?
And here is the working version and below is the non working version.
And below the first example is again a working version, where you need to add another page manually to see that it does not work in FF.
```
<!DOCTYPE html>
<!doctype html>
<html lang="en-gb">
<head>
<title>Lorem ipsum title</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%;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
margin-bottom:23px;
}
.book {
display: flex;
}
#cover {
width: 400px;
height: 550px;
}
.flip-book {
width: 400px;
height: 550px;
position: relative;
perspective: 1500px;
-moz-perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: left;
-moz-transform-origin: left;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform: rotateY(0deg);
transition: 0.5s;
color: #000;
border-left: 1px dashed lightgrey;
}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
box-sizing: border-box;
padding: 25px 13px;
line-height: 20px;
box-shadow: 5px 5px 25px grey;
border-radius: 0 10px 10px 0;
}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
box-sizing: border-box;
padding: 25px 25px;
line-height: 20px;
border-radius: 10px 0 0 10px;
}
.next-btn {
position: absolute;
height:100%;
width: 100%;
top:0;
left:0;
cursor: pointer;
}
.back-btn {
position: absolute;
height:100%;
width: 100%;
top:0;
left:0;
cursor: pointer;
}
#p1 { z-index: 6; }
#p2 { z-index: 5; }
#p3 { z-index: 4; }
#p4 { z-index: 3; }
#p5 { z-index: 2; }
#p6 { 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; }
#c6:checked ~ .flip-book #p6 { transform: rotateY(-180deg); z-index: 6; }
#c3:checked ~ .flip-book #p1 { display: none; }
#c4:checked ~ .flip-book #p2 { display: none; }
#c5:checked ~ .flip-book #p3 { display: none; }
#c6:checked ~ .flip-book #p4 { 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">
<input type="checkbox" id="c6">
<div id="cover"></div>
<div class="flip-book">
<div class="flip" id="p1">
<div class="back">
<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"></label>
</div>
<div class="front" style="height: 550px; width: 400px; background:darkblue; color:white;">
<img src="https://kibls.neocities.org/schachbrettblack.jpg">
<h1>Lorem ipsum Collection</h1>
<h2>Lorem ipsum book</h2>
<h3>E-book number 1</h3>
<label class="next-btn" for="c1"></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"></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"></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"></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"></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"></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"></label>
</div>
</div>
<div class="flip" id="p5">
<div class="back">
<h2>Lorem ipsum 9</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="c5"></label>
</div>
<div class="front">
<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"></label>
</div>
</div>
<div class="flip" id="p6">
<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="c6"></label>
</div>
<div class="front" style="height: 550px; width: 400px;">
<h2>Lorem ipsum 10</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="c6"></label>
</div>
</div>
</div>
</div>
</body>
</html>
```And here is the not working version where only 1 more site is added.
```
<!doctype html>
<html lang="en-gb">
<head>
<title>Lorem ipsum title</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%;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
margin-bottom:23px;
}
.book {
display: flex;
}
#cover {
width: 400px;
height: 550px;
}
.flip-book {
width: 400px;
height: 550px;
position: relative;
perspective: 1500px;
-moz-perspective: 1500px;
}
.flip {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform-origin: left;
-moz-transform-origin: left;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform: rotateY(0deg);
transition: 0.5s;
color: #000;
border-left: 1px dashed lightgrey;
}
.front {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
box-sizing: border-box;
padding: 25px 13px;
line-height: 20px;
box-shadow: 5px 5px 25px grey;
border-radius: 0 10px 10px 0;
}
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
backface-visibility: hidden;
background-color: #fff;
box-sizing: border-box;
padding: 25px 25px;
line-height: 20px;
border-radius: 10px 0 0 10px;
}
.next-btn {
position: absolute;
height:100%;
width: 100%;
top:0;
left:0;
cursor: pointer;
}
.back-btn {
position: absolute;
height:100%;
width: 100%;
top:0;
left:0;
cursor: pointer;
}
#p1 { z-index: 7; }
#p2 { z-index: 6; }
#p3 { z-index: 5; }
#p4 { z-index: 4; }
#p5 { z-index: 3; }
#p6 { z-index: 2; }
#p7 { 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; }
#c6:checked ~ .flip-book #p6 { transform: rotateY(-180deg); z-index: 6; }
#c7:checked ~ .flip-book #p7 { transform: rotateY(-180deg); z-index: 7; }
#c3:checked ~ .flip-book #p1 { display: none; }
#c4:checked ~ .flip-book #p2 { display: none; }
#c5:checked ~ .flip-book #p3 { display: none; }
#c6:checked ~ .flip-book #p4 { display: none; }
#c7:checked ~ .flip-book #p5 { 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">
<input type="checkbox" id="c6">
<input type="checkbox" id="c7">
<div id="cover"></div>
<div class="flip-book">
<div class="flip" id="p1">
<div class="back">
<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"></label>
</div>
<div class="front" style="height: 550px; width: 400px; background:darkblue; color:white;">
<img src="https://kibls.neocities.org/schachbrettblack.jpg">
<h1>Lorem ipsum Collection</h1>
<h2>Lorem ipsum book</h2>
<h3>E-book number 1</h3>
<label class="next-btn" for="c1"></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"></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"></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"></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"></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"></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"></label>
</div>
</div>
<div class="flip" id="p5">
<div class="back">
<h2>Lorem ipsum 9</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="c5"></label>
</div>
<div class="front">
<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"></label>
</div>
</div>
<div class="flip" id="p6">
<div class="back">
<h2>Lorem ipsum 11</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="c6"></label>
</div>
<div class="front">
<h2>Lorem ipsum 10</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="c6"></label>
</div>
</div>
<div class="flip" id="p7">
<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="c7"></label>
</div>
<div class="front" style="height: 550px; width: 400px;">
<h2>Lorem ipsum 12</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="c7"></label>
</div>
</div>
</div>
</div>
</body>
</html>
```I have now tested a lot of Youtube videos and also tried at countless examples from Codepen. All versions that I have taken over and then inserted more pages, after a certain number of pages Firefox no longer display the pages correctly. In all other browsers everything works fine, only Firefox makes these problems (but also only after a certain number of pages).
Here I post one more version that has the same problem. But since the charakter limit here on stackoverflow is only 30.000 you have to add on emore page manually to see the (same) effect.
I have also already filed a bug report for FF because this issue seems to be known for a while now. So, I would need a solution to make it work even in FF.
```
<!doctype html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: 'Times New Roman', Times, serif;
background-image: radial-gradient(ellipse at center, blanchedalmond 0%, tan 100%);
}
*, *::before, *::after {
box-sizing: border-box;
}
.book {
width: 600px;
max-width: 100%;
height: 400px;
max-height: 70vw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
perspective: 1500px;
user-select: none;
}
.page {
width: 49%;
height: 98%;
padding: 20px;
position: absolute;
top: 1%;
left: 50%;
font-size: 16px;
line-height: 18px;
color: black;
background-color: blanchedalmond;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 10%);
transition: transform 0.5s;
transform: rotateY(-180deg);
backface-visibility: hidden;
transform-style: preserve-3d;
transform-origin: left center;
z-index: 4;
}
.page:nth-of-type(2n) {
left: 1px;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 10%);
transform-origin: right center;
transform: rotateY(0);
}
.page:nth-of-type(2n):not(.cover) {
left: calc(1% + 1px);
}
.page h2 {
text-align: center;
}
.page h2 + p::first-letter {
font-size: 44px;
float: left;
height: 44px;
line-height: 36px;
vertical-align: baseline;
margin-right: 6px;
border-radius: 5px;
}
input[type=radio] {
display: none;
}
input:checked ~ .page {
transform: rotateY(0);
}
input:checked ~ .page:nth-of-type(2n) {
transform: rotateY(180deg);
}
input:checked ~ .page:nth-of-type(2n-1) {
z-index: 3;
}
input:checked ~ .page:nth-of-type(2n-1) ~ .page:nth-of-type(2n-1) {
z-index: 1;
}
input:checked + .page + .page + input + .page {
z-index: 2 !important;
}
.cover {
width: 50%;
height: 100%;
top: 0;
border-radius: 0 3px 3px 0;
background-color: maroon;
}
.cover h1 {
color: #ec5757;
text-align: center;
text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.5);
margin-top: 50%;
position: relative;
}
.cover h1::after {
content: "";
display: block;
width: 60px;
position: absolute;
bottom: -20px;
margin-left: -30px;
left: 50%;
border-top: 1px solid #ec5757;
box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.5);
}
.cover + .cover {
border-radius: 3px 0 0 3px;
}
.cover:first-of-type, .cover:last-of-type {
background-image: none;
}
.cover:first-of-type::before, .cover:last-of-type::before {
content: "";
width: calc(100% - 20px);
height: calc(100% - 20px);
border: 2px dashed rgba(0, 0, 0, 0.2);
position: absolute;
top: 9px;
left: 9px;
}
</style>
</head>
<body>
<div class="book">
<input type="radio" name="page" id="page-1" checked />
<label class="page cover" for="page-3"><h1>Lorem ipsum V2</h1></label>
<label class="page cover" for="page-1"></label>
<input type="radio" name="page" id="page-3" />
<label class="page" for="page-5">
<h2>Chapter 1</h2>
<p>Page 1</p>
</label>
<label class="page" for="page-3">
<h2>Chapter 2</h2>
<p>Page 2</p>
</label>
<input type="radio" name="page" id="page-5" />
<label class="page" for="page-7">
<h2>Chapter 3</h2>
<p>Page 3</p>
</label>
<label class="page" for="page-5">
<h2>Chapter 4</h2>
<p>Page 4</p>
</label>
<input type="radio" name="page" id="page-7" />
<label class="page" for="page-9">
<h2>Chapter 5</h2>
<p>Page 5</p>
</label>
<label class="page" for="page-7">
<h2>Chapter 6</h2>
<p>Page 6</p>
</label>
<input type="radio" name="page" id="page-9" />
<label class="page" for="page-11">
<h2>Chapter 7</h2>
<p>Page 7</p>
</label>
<label class="page" for="page-9">
<h2>Chapter 8</h2>
<p>Page 8</p>
</label>
<input type="radio" name="page" id="page-11" />
<label class="page cover" for="page-13"></label>
<label class="page cover" for="page-11"></label>
<input type="radio" name="page" id="page-13" />
</div>
</body>
</html>
```