I keep messing up my code on my flipbook project I was putting a background image infront of the the cover but on the back of the cover is just plain background. I input backface-visibility to hidden but the whole cover is gone after one flip.
We’d need to see the code you are using or better still a demo of the problem.
Otherwise we’d just be guessing 
Sorry I didn’t know how to insert code
Here’s HTML
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AH</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="header">
<h1>HYPER TEXT MARKUP LANGUAGE</h1>
</div>
<body>
<div class = "glass">
<input type="checkbox" id="checkbox-cover">
<input type="checkbox" id="checkbox-page1">
<input type="checkbox" id="checkbox-page2">
<input type="checkbox" id="checkbox-page3">
<input type="checkbox" id="checkbox-page4">
<div class="book">
<div class="cover front-cover-picture">
<label for="checkbox-cover"></label>
</div>
<div class="page" id="page1">
<div class="front-page">
<h1>AHH</h1>
<label class="next" for="checkbox-page1"><img src="right.png"></label>
</div>
<div class="back-page">
<label class="prev" for="checkbox-page1"><img src="left.png"></label>
</div>
</div>
<div class="page" id="page2">
<div class="front-page">
<h3> Identification: </h3>
<p> Note </p>
<p><input type = "text"> 1. A</p>
<p><input type = "text"> 2. A.</p>
<p><input type = "text"> 3. A.</p>
<p><input type = "text"> 4. A?</p>
<p><input type = "text"> 5. A tag?</p>
<p><input type = "text"> 6. A tags.</p>
<p><input type = "text"> 7. A.</p>
<label class="next" for="checkbox-page2"><img src="right.png"></label>
</div>
<div class="back-page">
<br><br>
<p> <input type = "text"> 8. A".</p>
<p> <input type = "text"> 9. A?.</p>
<p> <input type = "text"> 10. A.</p>
<br>
<h3>
<label class="prev" for="checkbox-page2"><img src="left.png"></label>
</div>
</div>
<div class="page" id="page3">
<div class="front-page">
A
</h3>
<p>
1. A.<br>
<table>
<tr>
<td>
<label><input type = "radio" name = "no1"> a. A>
</label></td>
<td>
<label><input type = "radio" name = "no1"> b. A>
</label></td>
</tr>
<tr>
<td>
<label><input type = "radio" name = "no1"> c. A>
</label></td>
<td>
<label><input type = "radio" name = "no1"> d. A>
</label></td>
</tr>
</table>
</p>
<p>
2. A.<br>
<table>
<tr>
<td>
<label><input type = "radio" name = "no2"> a. A1>
</label></td>
<td>
<label><input type = "radio" name = "no2"> b. A2>
</label></td>
</tr>
<tr>
<td>
<label><input type = "radio" name = "no2"> c. A>
</label></td>
<td>
<label><input type = "radio" name = "no2"> d. A4>
</label></td>
</tr>
</table>
</p>
<p>
3. A<br>
<table>
<tr>
<td>
<label><input type = "radio" name = "no3"> a.As>
</label></td>
<td>
<label><input type = "radio" name = "no3"> b. &Abr>
</label></td>
</tr>
<tr>
<td>
<label><input type = "radio" name = "no3"> c. Ael>
</label></td>
<td>
<label><input type = "radio" name = "no3"> d. Ali>
</label></td>
</tr>
</table>
</p>
<p>
4 TAd.<br>
<table>
<tr>
<td>
<label><input type = "radio" name = "no4"> a. &Ai>
</label></td>
<td>
<label><input type = "radio" name = "no4"> b. &A>
</label></td>
</tr>
<tr>
<td>
<label><input type = "radio" name = "no4"> c. &A>
</label></td>
<td>
<label><input type = "radio" name = "no4"> d. Ag>
</label></td>
</tr>
</table>
</p>
<p>
5. A.<br>
<table>
<tr>
<td>
<label><input type = "radio" name = "no5"> a. A>
</label></td>
<td>
<label><input type = "radio" name = "no5"> b. A>
</label></td>
</tr>
<tr>
<td>
<label><input type = "radio" name = "no5"> c. A>
</label></td>
<td>
<label><input type = "radio" name = "no5"> d. &Ar>
</label></td>
</tr>
</table>
</p>
<label class="next" for="checkbox-page3"><img src="right.png"></label>
</div>
<div class="back-page">
<p>
6. A.<br>
<table>
<tr>
<td>
<label><input type = "radio" name = "no6"> a. Ag>
</label></td>
<td>
<label><input type = "radio" name = "no6"> b. Al>
</label></td>
</tr>
<tr>
<td>
<label><input type = "radio" name = "no6"> c. Af>
</label></td>
<td>
<label><input type = "radio" name = "no6"> d. Aet>
</label></td>
</tr>
</table>
</p>
<p>
7. TA<br>
<table>
<tr>
<td>
<label><input type = "radio" name = "no7"> a. &Ag>
</label></td>
<td>
<label><input type = "radio" name = "no7"> b. &Ael>
</label></td>
</tr>
<tr>
<td>
<label><input type = "radio" name = "no7"> c. &Aef>
</label></td>
<td>
<label><input type = "radio" name = "no7"> d. At>
</label></td>
</tr>
</table>
</p>
<p>
8. A.<br>
<table>
<tr>
<td>
<label><input type = "radio" name = "no8"> a. Aul>
</label></td>
<td>
<label><input type = "radio" name = "no8"> b. Al>
</label></td>
</tr>
<tr>
<td>
<label><input type = "radio" name = "no8"> c. A>
</label></td>
<td>
<label><input type = "radio" name = "no8"> d. A>
</label></td>
</tr>
</table>
</p>
<p>
9. At.<br>
<table>
<tr>
<td>
<label><input type = "radio" name = "no9"> a. A>
</label></td>
<td>
<label><input type = "radio" name = "no9"> b. Al>
</label></td>
</tr>
<tr>
<td>
<label><input type = "radio" name = "no9"> c. A>
</label></td>
<td>
<label><input type = "radio" name = "no9"> d. A>
</label></td>
</tr>
</table>
</p>
<p>
10. A.<br>
<table>
<tr>
<td>
<label><input type = "radio" name = "no10"> a.A
</label></td>
<td>
<label><input type = "radio" name = "no10"> b. rA
</label></td>
</tr>
<tr>
<td>
<label><input type = "radio" name = "no10"> c. A">
</label></td>
<td>
<label><input type = "radio" name = "no10"> d. A"
</label></td>
</tr>
</table>
</p>
<label class="prev" for="checkbox-page3"><img src="left.png"></label>
</div>
</div>
<div class="back-cover"></div>
</div>
</div>
</body>
</html>
and Here is the css
body {
font-family: "Poppin", sans-serif;
background-image: url("bg.jpg");
background-size: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
div {
color: black;
}
.glass {
width: 60%;
height: 70%;
top: 30;
left: auto;
color: #fff;
padding: 50px 35px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(3px);
}
.header{
position:absolute;
top:0px;
}
.book {
width: 560px;
height: 660px;
top : 1%;
bottom: 1%;
left: 32.4%;
right: 32.4%;;
position: relative;
transition-duration: 1s;
perspective: 1500;
}
input[type=text] {
background: transparent;
border: none;
border-bottom: 1px solid #000000;
}
input[type=checkbox] {
display: none;
}
.front-cover-picture{
background-image: url(bookcover.png);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 5;
}
.cover{
background-color: #82A0BC;
width: 100%;
height: 100%;
border-radius: 0 15px 15px 0;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
transform-origin: center left;
-webkit-backface-visibility: visible;
}
.back-cover{
background-color: #82A0BC;
width: 100%;
height: 100%;
border-radius: 0 15px 15px 0;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
transform-origin: center left;
}
.cover {
position: absolute;
z-index: 4;
transition: transform 1s;
}
.cover label {
width: 100%;
height: 100%;
cursor: pointer;
}
.back-cover {
position: relative;
z-index: -1;
}
.front-cover-picture {
position: absolute;
width: 100%;
height: 100%;
z-index: 9;
}
.page {
position: absolute;
background-color: white;
width: 540px;
height: 640px;
border-radius: 0 15px 15px 0;
margin-top: 10px;
transform-origin: left;
transform-style: preserve-3d;
transition-duration: 2s;
}
.front-page {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
box-sizing: border-box;
padding: 1rem;
}
.back-page {
position: absolute;
transform: rotateY(180deg);
width: 100%;
height: 100%;
z-index: 99;
backface-visibility: hidden;
}
.next, .prev {
position: absolute;
bottom: 1em;
cursor: pointer;
}
.next {
right: 1em;
}
.prev {
left: 1em;
}
#page1 {
z-index: 3;
}
#page2 {
z-index: 2;
}
#page3 {
z-index: 1;
}
#checkbox-cover:checked ~ .book {
transform: translateX(200px);
}
#checkbox-cover:checked ~ .book .cover {
transition: transform 1.5s, z-index 0.5s 0.5s;
transform: rotateY(-180deg);
z-index: 1;
}
#checkbox-cover:checked ~ .book .page {
box-shadow: 0 4px 30px rgba(41, 41, 41, 0.1);
}
#checkbox-page1:checked ~ .book #page1 {
transition: transform 1.5s, z-index 0.5s 0.5s;
transform: rotateY(-180deg);
z-index: 2;
}
#checkbox-page2:checked ~ .book #page2 {
transition: transform 1.5s, z-index 0.5s 0.5s;
transform: rotateY(-180deg);
z-index: 3;
}
#checkbox-page3:checked ~ .book #page3 {
transform: rotateY(-180deg);
z-index: 4;
}
Your perspective needs a unit and you have some invalid p tags wrapping your table. There are also some mixed measurements where you have percentages on your main wrapper but your book is a fixed height and width so those two won’t really mix.
I haven’t really had time to look at this in detail yet but I put up a codepen with something that is vaguely working in case someone else wants to drop by and fix it up
It looks as though you are missing a div for the inside cover if you want to hide the front page image when it flips. usually the front and the back are different divs and you use backface-visibility:hidden to hide the front page and show the back of the front page which is in fact another div.
Hopefully the codepen will help but if no one else is around I’ll be back later this evening to have a better look
Okay, thank you for the help!
I had another play with it and I think you were looking for something like this.
(Click the Edit on codepen to see the full size and then you can ‘fork’ the codepen for your own use once you set up a free codepen account - if you want.)
The issues I see are that it is not responsive and will not adapt to screen size so that is something that needs to be addressed unless you have a special use-case for it.
Also I’m not keen on the table being used for the inputs as that could be css and your numbered sections should probably be a list structure or use css counters. However, as I didn’t really know your intentions I left it as it was.
You had a blur on the glass element but that really slows down the flip animation and I would advise against it.
I haven’t validated the html so there are probably still some errors I missed but I was in a rush:)
Hope that gives you something to work with.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.