Having a bit of trouble as a beginner with this. Any help would be much appreciated.
This is the code in question:
HTML:
<div class='zone11'>
<div class='book11'>
<div class='cover11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='page11'></div>
<div class='last-page11'></div>
<div class='back-cover11'></div>
</div>
</div>
CSS:
.zone11{
height: 700px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1000px;
}
.book11{
display: flex;
align-items: center;
cursor: pointer;
}
.book11:hover .cover11{
transform: rotateX(10deg) rotateY(-180deg);
}
.book11:hover .page11{
transform: rotateX(10deg) rotateY(-180deg);
z-index: 2;
}
.cover11{
z-index: 1;
transition: all 3.5s;
}
.back-cover11{
z-index: -3;
}
.cover11, .back-cover11{
height: 450px;
width: 360px;
background: #3f0035;
border-radius: 2px 20px 20px 2px;
position: absolute;
box-shadow: 1px 1px 10px gray;
transform: rotateX(10deg);
transform-origin: center left;
}
.page11{
height: 430px;
width: 350px;
background: white;
position: absolute;
border-radius: 2px 10px 10px 2px;
transform: rotateX(10deg);
transform-origin: center left;
z-index: -1;
}
.last-page11{
height: 430px;
width: 350px;
background: white;
position: absolute;
border-radius: 2px 10px 10px 2px;
transform: rotateX(10deg);
transform-origin: center left;
z-index: -2;
}
.page11:nth-child(2){
transition-duration: 3s;
}
.page11:nth-child(3){
transition-duration: 2.6s;
}
.page11:nth-child(4){
transition-duration: 2.2s;
}
.page11:nth-child(5){
transition-duration: 1.8s;
}
.page11:nth-child(6){
transition-duration: 1.4s;
}
.book11:hover .page11:nth-child(2){
transition-duration: 6s;
}
.book11:hover .page11:nth-child(3){
transition-duration: 5.6s;
}
.book11:hover .page11:nth-child(4){
transition-duration: 5.2s;
}
.book11:hover .page11:nth-child(5){
transition-duration: 4.8s;
}
.book11:hover .page11:nth-child(6){
transition-duration: 4.4s;
}
I currently have a book animation that opens to one page when hovered over (with 5 pages scrolling before it reaches there). I want to change it so that it opens and closes on click rather than hover.
I removed the hover from the classes. For example, the cover now has an open state:
.cover11__open{
transform: rotateX(10deg) rotateY(-180deg);
}
Here is the corresponding javascript:
var cover11 = document.querySelector('.cover11');
var book11= document.querySelector('.book11');
book11.addEventListener( 'click', function() {
cover11.classList.toggle('cover11__open');
});
The above method has worked for me in other cases but doesn't seem to work here. I've also tried some other solutions found online with no luck. Appreciate any assistance.