Анимация портфеля «электронных книг» с использованием CSS, почему страницы не поворачиваются? ⇐ CSS

[Anonymous]

Я строю свое портфолио с CSS и JS. Я следовал этому уроку о том, как создать Flipbook с CSS. Но по какой -то причине я не могу заставить свои страницы перевернуться; Только моя обложка. Когда я отлаживаю на терминале браузера, страницы поворачиваются. Однако, когда я нажимаю на страницу, обложка только открывается и закрывается.

Код: Выделить всё

/*Global settings*/
@font-face {
font-family: Quintessential;
src: url(./assets/font/Quintessential-Regular.ttf);
}

*{
font-family: 'Quintessential', sans-serif;
}

body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color:rgb(54, 45, 36);
}

input{
display: none;
}

/*Remove selections*/
::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}

/*Book*/
.book{
max-width: 350px;
width: 100%;
height: 550px;
position: relative;
transition-duration: 1s;
perspective: 1500px;
border-radius: 2px 5px 5px 2px;
}

/*Book Cover*/
.cover{
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
transition: transform 1s, z-index 0.5s;
}

.inner_cover{
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
transform-origin: center left;
}

.behind_cover{
background-color: #211212;
transform: rotateY(180deg);
border-radius: 5px 2px 2px 5px;
box-shadow: 5px 5px 20px;
}

.back_cover{
position: absolute;
z-index: 0;
background-color: #211212;
width: 100%;
height: 100%;
border-radius: 2px 5px 5px 2px;
box-shadow: 5px 5px 20px;
}

.front_cover, .behind_cover{
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}

.front_cover{
border-radius: 2px 5px 5px 2px;
}

/*IMG for cover*/
#book_cover{
width: 100%;
height: 100%;
border-radius: 2px 5px 5px 2px;
}

/*Turn animation for cover*/
.cover label{
width: 100%;
height: 100%;
cursor: pointer;
display: block;
}

#flip_cover:checked ~ .book{
transform: translateX(170px);
}

#flip_cover:checked ~ .book .inner_cover{
transform: rotateY(180deg);
z-index: 1;
}

#flip_cover:checked ~ .book .pages{
box-shadow: 0 0 3px rgb(99, 98, 98);
}

/*Pages*/
.pages{
z-index: 1;
background-color: rgb(255, 232, 207);
width: 330px;
height: 530px;
position: absolute;
border-radius: 2px 5px 5px 2px;
margin-top: 10px;
transform-origin: left;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition-duration: 1.5s;
}

.front_page{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
box-sizing: border-box;
padding: 1rem;
}

.back_page{
transform: rotateY(180deg);
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
z-index: 99;
box-sizing: border-box;
padding: 1rem;
}

.next, .prev{
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 50;
background: transparent;
cursor: pointer;
}

.next{
right: 0;
}

.prev{
left: 0;
}

#page_1{
z-index: 15;
}

#page_2{
z-index: 14;
}

#page_3{
z-index: 13;
}

#page_4{
z-index: 12;
}

#page_5{
z-index: 11;
}

/*Turn animation for pages*/
#flip_page_1:checked ~ .book #page_1{
transform: rotateY(-180deg);
z-index: 10;
}

#flip_page_2:checked ~ .book #page_2{
transform: rotateY(-180deg);
z-index: 9;
}

#flip_page_3:checked ~ .book #page_3{
transform: rotateY(-180deg);
z-index: 8;
}

#flip_page_4:checked ~ .book #page_4{
transform: rotateY(-180deg);
z-index: 7;
}

/*Book Spine
.spine{

}*/

/*Book Stand (You should add a dark wood texture)*/
.book_stand{
background-color: rgb(70, 30, 0);
width: 100%;
max-width: 850px;
min-height: 580px;
border-radius: 5px;
outline: 3px solid rgb(184, 125, 37);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}< /code>





[*]

Hillary C.  | Web Developer





[i]
















[img]./assets/img/cover.png[/img]









hi



About Me
[img]./assets/img/avatar.jpg[/img]
Hello! info
1







Skills

[list]
HTML & CSS
[*]JavaScript
[*]Canva
[*]GitHub
[*]WordPress
[*]Python
[*]C++
[/list]
Languages
[list]
[*]English: Native
[*]Spanish: Fluent
[/list]

Contact
E-Mail:
[url=https://github.com/hlrydev]My GitHub[/url]
2



Simple GPA Calculator

[h4]Allows students to calculate the minimum grades needed to reach their target GPA.[/h4]
Skills used: HTML &  CSS, JavaScript, input validation, dynamic calculations, user-centric logic.
3






Social Media Links Landing Page

[h4]A minimal, responsive landing page that neatly organizes and displays social media profiles in one place, inspired by tools like Linktree.[/h4]
Skills used: HTML & CSS, layout structure with Grid.
[url=https://hlrydev.github.io/hcsociallinksprofile/]Live Link[/url]
[url=https://github.com/hlrydev/hcsociallinksprofile]GitHub Repo[/url]
4

Minimal Blog Entry Preview

[h4]A clean, minimal blog page preview designed focused on https://github.com/hlrydev/blogpreviewcardreadability, typography, and layout. It simulates a blog post preview format commonly seen in CMS platforms or websites.[/h4]
Skills used: HTML & CSS, typography and content-focused design.
[url=https://hlrydev.github.io/hcsociallinksprofile/]Live Link[/url]
[url=https://github.com/hlrydev/blogpreviewcard]GitHub Repo[/url]
5






Make a Wish

[h4]A whimsical, interactive web page where users click to create glowing stars in a dreamy pink sky. Each click adds a star and updates a counter. Once a certain number is reached, a shooting star streaks across the screen as a surprise reward. Moving clouds in the background add depth and atmosphere, creating a relaxing and visually dynamic user experience.[/h4]
Skills used: HTML & CSS, DOM manipulation, event handling and state tracking, basic animation techniques.

6



Other Projects

Quokkabot, Llamabot, & Chickbot: Discord Bots
[h4]Set of Python-based Discord bots capable of engaging with users through interactive commands, games like Magic 8-ball, and music streaming features.  Bots respond to user inputs in real time and even interact with each other.[/h4]
Skills used: Python, user interaction, modular thinking, event-based programming, APIs.
7






To be continued...[/i]
8

Подробнее здесь: https://stackoverflow.com/questions/796 ... es-turning