Magazine page turn

by PhilQ

HTML

<button onclick="$('.page').toggleClass('turned');">Turn</button>
<div class="book">
    <div class="outer-page">
        <div class="page">
    Kyjug fhudg hje fijd fijsg fas ihdrskj dshcfklds fkldsh cdsh cdh is ij kshcish kldh vkijdfh vkfhijdfhvkndbh klzh yudxu fil  inc esioj oehy sklhvy e hoje vjodh odwhkjd fkdh kjdg kljdgijdhfkj dfkjhf k kjdsfh gkdfsh kdfh gkhg okadg oasb tr lav aerkvh  eajh laf vkldsvlkzdsf klsd kldf jgfkl.
        </div>
    </div>
</div>

CSS

*,*:before, *:after { box-sizing: border-box; margin: 0px; padding: 0px;}
html, body { height: 100%; width: 100%;}
body { padding: 0px; }

.book {
    position: absolute;
    display: inline-block;
    width: 400px;
    height: 300px;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -150px;
    background-color: #f8f8f8;
}
.outer-page {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid red;
    clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 0% 100%); 
    overflow: hidden;
}
.page {
    display: inline-block;
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    border: 1px solid #000;
    background-color: #eee;
    box-shadow: inset 0px 0px 5px 0px #000;
    transition: all 0.35s ease;
        -webkit-transition: all 0.35s ease;
    bottom: 0%;
    left: 0%;
    transform: rotate(0deg);
    transform-origin: 0% 0%;
}
.page.turned {
    bottom: 0%;
    left: 100%;
    transform: rotate(25deg);
}