Je n’arrête pas de gâcher mon code sur mon projet de flipbook. Je mettais une image d’arrière-plan devant la couverture, mais au dos de la couverture, il n’y a qu’un fond uni. J’entre la visibilité de la face arrière sur masquée mais toute la couverture a disparu après un retournement.
25 mars 2023, 22h54
2
Nous aurions besoin de voir le code que vous utilisez ou mieux encore une démonstration du problème.
Sinon, nous ne ferions que deviner 
Désolé je ne savais pas comment insérer le code
Voici HTML
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AH</title>
<link rel="stylesheet" href="https://www.sitepoint.com/community/t/how-to-put-a-background-on-a-flipbook-cover/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>
et voici le 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;
}
26 mars 2023, 12h29
4
-webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 5;
Votre perspective a besoin d’une unité et vous avez des balises p invalides qui enveloppent votre tableau. Il existe également des mesures mixtes où vous avez des pourcentages sur votre emballage principal, mais votre livre a une hauteur et une largeur fixes, de sorte que ces deux ne se mélangent pas vraiment.
Je n’ai pas encore vraiment eu le temps de regarder cela en détail mais j’ai mis en place un codepen avec quelque chose qui fonctionne vaguement au cas où quelqu’un d’autre voudrait passer et le réparer 
Il semble qu’il vous manque une div pour la couverture intérieure si vous souhaitez masquer l’image de la première page lorsqu’elle se retourne. généralement, le recto et le verso sont des divs différents et vous utilisez backface-visibility:hidden pour masquer la première page et afficher le verso de la première page qui est en fait une autre div.
J’espère que le codepen aidera, mais s’il n’y a personne d’autre, je reviendrai plus tard ce soir pour mieux regarder 
D’accord, merci pour l’aide !
PaulOB
26 mars 2023, 19h44
6
J’ai eu un autre jeu avec et je pense que vous cherchiez quelque chose comme ça.
(Cliquez sur Modifier sur le codepen pour voir la taille réelle, puis vous pourrez “fourcher” le codepen pour votre propre usage une fois que vous aurez créé un compte codepen gratuit – si vous le souhaitez.)
Les problèmes que je vois sont qu’il n’est pas réactif et ne s’adaptera pas à la taille de l’écran, c’est donc quelque chose qui doit être résolu à moins que vous n’ayez un cas d’utilisation spécial pour cela.
De plus, je ne suis pas enthousiaste à l’idée que la table soit utilisée pour les entrées, car cela pourrait être css et vos sections numérotées devraient probablement être une structure de liste ou utiliser des compteurs css. Cependant, comme je ne connaissais pas vraiment vos intentions, je l’ai laissé tel quel.
Vous avez eu un flou sur l’élément en verre mais cela ralentit vraiment l’animation de retournement et je le déconseille.
Je n’ai pas validé le html donc il y a surement encore des erreurs que j’ai loupé mais j’étais pressé 
J’espère que cela vous donne quelque chose avec quoi travailler.
to www.sitepoint.com
Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931
Jeu de briques
Snake
Pacman
Bubble