body
{
    background-color: black;
}
.book
{
    width: 300px;
    height: 400px;
    margin: 100px auto;
    position: relative;
    transition:1s;
    transform-style: preserve-3d;
    transform:rotateX(-15deg) rotateY(35deg);
    &::before
    {
        content:'';
        display: flex;
        width:100%;
        height:100px;
        background-image:repeating-linear-gradient(white 1%,rgb(72,72,72) 2%);
        position:absolute;
        top:5px;
        left:0;
        transform-origin:top;
        transform:rotateX(-90deg);
    }
    &::after
    {
        content:'';
        width: 100px;
        height: 100%;
        display: flex;
        position:absolute;
        top:0;left: 0;
        transform-origin:left;
        transform:rotateY(90deg);
        background-color: red;
    }
    &:hover
    {
        transform:rotateX(-15deg) rotateY(145deg);
    }
    >img
    {
        width: 100%;
        height: 100%;
        object-fit:cover;
        position:absolute;
        top: 0;
        left: 0;
        &:last-of-type
        {
            transform:translateZ(-100px);

        }
    }
}
/* end */