JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page-wrapper" page="6">
    <div class="outter-wrapper">
        <div class="inner-wrapper">
            <img src="http://farm8.staticflickr.com/7314/9328570238_ef2413b9a5_z.jpg"/>
        </div>
    </div>
</div>

CSS

.page-wrapper {
    position: absolute; 
    overflow: hidden; 
    width: 461px; 
    height: 600px; 
    top: 0px; 
    left: 0px; 
    right: auto; 
    z-index: 12
}
.outter-wrapper {
    position: absolute;
    overflow: hidden; 
    -webkit-transform-origin: 100% 100%; 
    -webkit-transform: translate(-50px, -100px) rotate(45deg);
}
.inner-wrapper {
    -webkit-transform-origin: 100% 100%; 
    -webkit-transform: rotate(-45deg) translate(100px, 20px);
}