body
{
    position: fixed;
 	height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F8D7C6;
}

#book
{
    width:calc(100vh * 0.45 - 50px);
    height:calc((100vh * 0.45 - 50px) * 2);
    position: relative;
    display: flex;
    align-items: end;
    perspective: 2000px;
    transform-style: preserve-3d;
}

img
{
    position: absolute;
    width: 100%;
    transform-origin: top;
}

.b1,
.b5
{
    box-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.2);
}

.next4
{
    animation: flip-to-top1 2s ease-in-out;
    animation-fill-mode:forwards;
}
.next3
{
    animation: flip-to-top2 2s ease-in-out;
    animation-fill-mode:forwards;
}
.next2
{
    animation: flip-to-top3 2s ease-in-out;
    animation-fill-mode:forwards;
}
.next1
{
    animation: flip-to-top4 2s ease-in-out;
    animation-fill-mode:forwards;
}
.next0
{
    animation: flip-to-top5 2s ease-in-out;
    animation-fill-mode:forwards;
}
.next-1
{
    animation: flip-to-top6 2s ease-in-out;
    animation-fill-mode:forwards;
}

.pre4
{
    animation: flip-to-bottom1 2s ease-in-out;
}
.pre3
{
    animation: flip-to-bottom2 2s ease-in-out;
}
.pre2
{
    animation: flip-to-bottom3 2s ease-in-out;
}
.pre1
{
    animation: flip-to-bottom4 2s ease-in-out;
}
.pre0
{
    animation: flip-to-bottom5 2s ease-in-out;
}
.pre-1
{
    animation: flip-to-bottom6 2s ease-in-out;
}

@keyframes flip-to-top1
{
    from
    {
        transform: rotateX(5deg);
    }
    to
    {
        transform: rotateX(180deg);
    }
}
@keyframes flip-to-top2
{
    from
    {
        transform: rotateX(4deg);
    }
    to
    {
        transform: rotateX(179deg);
    }
}
@keyframes flip-to-top3
{
    from
    {
        transform: rotateX(3deg);
    }
    to
    {
        transform: rotateX(178deg);
    }
}
@keyframes flip-to-top4
{
    from
    {
        transform: rotateX(2deg);
    }
    to
    {
        transform: rotateX(177deg);
    }
}
@keyframes flip-to-top5
{
    from
    {
        transform: rotateX(1deg);
    }
    to
    {
        transform: rotateX(176deg);
    }
}
@keyframes flip-to-top6
{
    from
    {
        transform: rotateX(0);
    }
    to
    {
        transform: rotateX(175deg);
    }
}

@keyframes flip-to-bottom1
{
    from
    {
        transform: rotateX(180deg);
    }
    to
    {
        transform: rotateX(5deg);
    }
}
@keyframes flip-to-bottom2
{
    from
    {
        transform: rotateX(179deg);
    }
    to
    {
        transform: rotateX(4deg);
    }
}
@keyframes flip-to-bottom3
{
    from
    {
        transform: rotateX(178deg);
    }
    to
    {
        transform: rotateX(3deg);
    }
}
@keyframes flip-to-bottom4
{
    from
    {
        transform: rotateX(177deg);
    }
    to
    {
        transform: rotateX(2deg);
    }
}
@keyframes flip-to-bottom5
{
    from
    {
        transform: rotateX(176deg);
    }
    to
    {
        transform: rotateX(1deg);
    }
}
@keyframes flip-to-bottom6
{
    from
    {
        transform: rotateX(175deg);
    }
    to
    {
        transform: rotateX(0);
    }
}