z-index not working properly as expected?-CodePudding

I'm trying to make a book that flips on click on both sides. When I click a page, I check first the direction and flip it to left if it's not to right. I change the z-index as well to keep the order.

I have a problem. When i flip the page back to right from left, z-index is applied correctly but on the screen I see the changed applied a few seconds later. If i console log the z-index, I see the value getting updated correctly. I don't know what I'm missing. can anyone tell me? thank you.

const book = document.querySelector('.book');
book.addEventListener('click', e => {
    if (e.target.attributes['data-position'].value !== 'left') {
        e.target.setAttribute('data-position', 'left');
        e.target.classList.remove('flip-to-right');
        e.target.classList.add('flip-to-left');
        setTimeout(() => {
            console.log (e.target.attributes['data-position'].value);
            // e.target.style.zIndex = e.target.attributes['data-index'].value*(-1);
            e.target.style.zIndex = 1;
        }, 1000);
    }
    else {
        e.target.style.zIndex = e.target.attributes['data-index'].value;
        e.target.classList.remove('flip-to-left');
        e.target.classList.add('flip-to-right');
        e.target.setAttribute('data-position', 'right');
    }
})

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: yellow;
    perspective: 1000px;
}

.book {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.book:hover .cover{
    /* transform: rotateX(10deg) rotateY(-180deg); */
}

.book:hover .page{
    /* transform: rotateX(10deg) rotateY(-180deg); */
    /* z-index: 2; */
}

.flip-to-left {
    transform: rotateX(10deg) rotateY(-180deg);
}

.flip-to-right {
    transform: rotateX(10deg) rotateY(0deg);
}

.cover {
    z-index: 7;
    /* transform: rotateX(10deg) rotateY(-180deg); */
    transition: all 3s;
}

.page-1 {
    z-index: 5;
}
.page-2 {
    z-index: 4;
}
.page-3 {
    z-index: 3;
}
.page-4 {
    z-index: 2;
}
.last-page {
    z-index: 1;
}

.back-cover {
    z-index: 0;
}

.back-cover,
.cover{
    height: 300px;
    width: 260px;
    background-color: blue;
    border-radius: 10px;
    position: absolute;
    box-shadow: 1px 1px 10px gray;
    /* transform: rotateX(10deg); */
    transform-origin: center left;
}

.last-page,
.page {
    height: 280px;
    width: 250px;
    background: white;
    position: absolute;
    border-radius: 10px;
    /* transform: rotateX(10deg); */
    transform-origin: center left;
    transition: all 3s;

    /* z-index: -1; */
}

/* .page:nth-child(2) {
    transition-duration: 3s;
}

.page:nth-child(3) {
    transition-duration: 2.6s;
}
.page:nth-child(4) {
    transition-duration: 2.2s;
}
.page:nth-child(5) {
    transition-duration: 1.8s;
}
.page:nth-child(6) {
    transition-duration: 1.4s;
}

.book:hover .page:nth-child(2) {
    transition-duration: 6s;
}

.book:hover .page:nth-child(2) {
    transition-duration: 6s;
}
.book:hover .page:nth-child(3) {
    transition-duration: 5.6s;
}
.book:hover .page:nth-child(4) {
    transition-duration: 5.2s;
}
.book:hover .page:nth-child(5) {
    transition-duration: 4.8s;
}
.book:hover .page:nth-child(6) {
    transition-duration: 4.4s;
} */

.last-page > div {
    width: 150px;
    border-radius: 10px;
    margin: 20px auto;
    background-color: green;
    position: relative;
    /* z-index: -1; */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="js.js" defer> </script>
</head>
<body>
    <div >
        <div  data-index="7" data-position="right"> cover </div>
        <div  data-index="6" data-position="right"> page 1</div>
        <div  data-index="5" data-position="right"> page 2</div>
        <div  data-index="4" data-position="right"> page 3</div>
        <div  data-index="3" data-position="right"> page 4</div>
        <div  data-index="2" data-position="right">page 5</div>
        <div  data-index="1" data-position="right"></div>
    </div>
</body>
</html>

CodePudding user response：

The problem is transition: all 3s;. You're animating all properties, including the zIndex. If you change it to transition: transform 3s; (in both places) it seems to behave. You might need to add more properties, I didn't check.

CodePudding user response：

could it have anything to do with your transition: all 3s ? z-index has a descrete animation type which means they do animate but only with one keyframe and if i'm not misstaken the animation happens half way through the duration.

CodePudding user response：

please refer the attached video update the following css and try to run and check.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: yellow;
    perspective: 1000px;
}

.book {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.book:hover .cover{
    /* transform: rotateX(10deg) rotateY(-180deg); */
}

.book:hover .page{
    /* transform: rotateX(10deg) rotateY(-180deg); */
    /* z-index: 2; */
}

.flip-to-left {
    transform: rotateX(10deg) rotateY(-180deg);
}

.flip-to-right {
    transform: rotateX(10deg) rotateY(0deg);
}

.cover {
    z-index: 7;
    /* transform: rotateX(10deg) rotateY(-180deg); */
    transition: all 3s;
}
.cover{
  z-index: 0;
}
.page-1 {
    z-index: 2;
}
.page-2 {
    z-index: 2;
}
.page-3 {
    z-index: 2;
}
.page-4 {
    z-index: 2;
}
.last-page {
    z-index: 2;
}

.back-cover {
    z-index: 3;
}

.back-cover,
.cover{
    height: 300px;
    width: 260px;
    background-color: blue;
    border-radius: 10px;
    position: absolute;
    box-shadow: 1px 1px 10px gray;
    /* transform: rotateX(10deg); */
    transform-origin: center left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.last-page,
.page {
    height: 280px;
    width: 250px;
    background: linear-gradient(272deg, #ffffff, #858181);
    position: absolute;
    border-radius: 10px;
    /* transform: rotateX(10deg); */
    transform-origin: center left;
    transition: all 3s;
    display: flex;
    align-items: center;
    justify-content: center;
}


.last-page > div {
    width: 150px;
    border-radius: 10px;
    margin: 20px auto;
    background-color: green;
    position: relative;
    /* z-index: -1; */
}