.frame {
    position: absolute;
    left: 50%;
    margin-left: -112px;
    top: 50%;
    margin-top: -150px;
    border-top: 25px solid #784320;
    border-right: 25px solid #6a3919;
    border-bottom: 25px solid #945a33;
    border-left: 25px solid #8f4b1e;
    width: 200px;
    height: 300px;
}
.show-book-frame {
    width: 100%;
    display: flex;
    justify-content: center;
}
.book {
    display: block;
    float: left;
    width: 200px;
    height: 300px;
    margin: 0;
    padding: 0;
    background: #333;
    transform: translate3d(0, 0, 0);
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.book ul {
    display: block;
    position: relative;
    width: 200px;
    height: 300px;
    margin: 0px;
    padding: 0;
    list-style: none;
    perspective-origin: 0 50% 0;
    perspective: 800px;
    -webkit-transform: translate3d(0, 0, 0);
}

.book ul > li {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 300px;
    padding: 0;
    margin: 0;
    background-color: #fffbfb;
    border: 1px solid gray;
    background-image: (
        linear-gradient(left, #000000 0%, #000000 90%, #ededed 100%)
    );
    transform-origin: 0 50% 0;
    transform-style: preserve-3d;
    transition: all 5s cubic-bezier(0.25, 1, 0.25, 1);
}

.cover {
    z-index: 2 !important;
    display: block;
    width: 200px;
    height: 300px;
    background: #333 !important;
    transform: rotateY(0deg) translateZ(0px);
}
.page1 {
    display: none;
    transform: rotateY(20deg) translateZ(-1px);
}
.page2 {
    display: none;
    transform: rotateY(30deg) translateZ(-2px);
}
.page3 {
    display: none;
    transform: rotateY(40deg) translateZ(-3px);
}

.book:hover .page1 {
    transform: rotateY(-34deg);
}

.book:hover .page2 {
    transform: rotateY(-27deg);
}

.book:hover .page3 {
    transform: rotateY(-15deg);
}

.book:hover .cover {
    transform: rotateY(-135deg);
}