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

body                    {
    background-color:#111;
    color:#222;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100dvh;
    perspective:1500px;
}

#book{
    width:800px;
    height:700px;
    position:relative;
}

.page{
    width:400px;
    height:700px;
    transition:transform 500ms ease-in-out;
    transform-origin:left center;
    transform-style:preserve-3d;
    position:absolute;
    left:50%;
    top:0;
    
}

.page>div{
    width:400px;
    height:700px;
    position:absolute;
    left:0;
    top:0;
    padding:25px;    
}

.page .front{
    background-color:yellow;
    border-radius:0 25px 25px 0;
}

.page .back{
    background-color:green;
    backface-visibility:hidden;
    transform:rotateY(180deg);
    border-radius:25px 0 0 25px;
}

.page.turned{
    transform:rotateY(-180deg);
}