Mini Librito

<div class="M98"><div class="conM98">

<input type="checkbox" name="porM98" id="M98">
<label for="M98" class="porM98 aa"><div style="background-image: url(https://i.imgur.com/xwUwkmQ.gif); color: #FFF0A1;">
<strong>(abrir)</strong></div><div style="background-image: url(https://i.imgur.com/l1EKUcF.jpg);"><strong>(cerrar)</strong></div></label>

<input type="checkbox" id="aaM98"><label class="bpM98" for="aaM98">01</label><span><i><div class="pagM98">Pág. 001
</div><div class="pagM98">Pág. 002
</div></i></span>

<input type="checkbox" id="jjM98"><label class="bpM98" for="jjM98">02</label><span><i><div class="pagM98">Pág. 003
</div><div class="pagM98">Pág. 004
</div><a href="https://emmescodes.tumblr.com/" title="Code by Emme" class="miM98">Emme</a></i></span>

<div class="pagM98 con" style="background-image: url(https://i.imgur.com/l1EKUcF.jpg);"></div></div>

</div>

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,900|Ruge+Boogie|Lora&display=swap" rel="stylesheet">


CSS:
.M98 > br, .conM98 > br, .M98 input {
 display: none;
}
.M98 div::-webkit-scrollbar {
 width: 3px !important;
 background: #0006 !important;
}
.M98 div::-webkit-scrollbar-thumb {
 background: #0006 !important;
}
.M98, .M98 * {
 transition: 1s;
 box-sizing: border-box;
}
.M98 {
 padding: 50px 0;
 font: 10px Montserrat;
 color: #333;
}
.conM98 {
width: 250px;
height: 350px;
 margin: auto;
 position: relative;
 transform-style: preserve-3d;
 perspective: 2000px;
 z-index: 2;
}
.porM98.aa {
 z-index: 30;
 transform-style: preserve-3d;
}
.porM98.aa, .conM98 > span, .pagM98, .conM98 > span > i {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 transform-origin: left center;
}
#M98:checked ~ span, #M98:checked ~ .pagM98.con {
 margin-left: 50%;
}
.conM98 > span > i {
 transform-style: preserve-3d;
 perspective: 2000px;
 font-style: normal;
}
.pagM98 {
 backface-visibility: hidden;
 background: #FFF;
 padding: 30px;
 color: #b4b4b4;
 font-size: 8px;
 text-align: left;
}
.pagM98:nth-of-type(odd) {
 background: linear-gradient(to right, #DDD, #FFF 1px);
 text-align: right;
}
#M98:checked ~ .porM98.aa {
 transform: rotateY(-181deg);
 animation: port .6s both;
 margin-left: 125px;
}

#M98:checked ~ label.bpM98 {
 display: block;
}
.pagM98:nth-of-type(even) {
 transform: rotateY(180deg) translateX(-100%);
}
.bpM98 {
 position: absolute;
 top: calc(100% + 10px);
 left: 125px;
 padding: 4px 0 2px;
 background: #FFF;
 display: none;
 margin-left: 70px;
 width: 21px;
 text-align: center;
 border-radius: 50%;
 border: 1px solid #DDD;
 box-shadow: 0 0 0 3px #FFF;
 color: #AAA;
}
.conM98 .bpM98:hover {
 color: #333;
}
.conM98 input:checked + label + span .pagM98 {
 transform: rotateY(-180deg);
}
.conM98 input:checked + label + span .pagM98 + .pagM98 {
 transform: rotateY(0deg) translateX(-100%);
}
.conM98 input:checked + label.bpM98 {
 margin-left: -92px;
}

.bpM98:nth-of-type(2),
.conM98 > span:nth-of-type(1) {
 z-index: 20;
}
.bpM98:nth-of-type(3),
.conM98 > span:nth-of-type(2) {
 z-index: 18;
}
.bpM98:nth-of-type(4),
.conM98 > span:nth-of-type(3) {
 z-index: 16;
}
.bpM98:nth-of-type(5),
.conM98 > span:nth-of-type(4) {
 z-index: 14;
}
.bpM98:nth-of-type(6),
.conM98 > span:nth-of-type(5) {
 z-index: 12;
}
.bpM98:nth-of-type(7),
.conM98 > span:nth-of-type(6) {
 z-index: 10;
}
.bpM98:nth-of-type(8),
.conM98 > span:nth-of-type(7) {
 z-index: 8;
}
.bpM98:nth-of-type(9),
.conM98 > span:nth-of-type(8) {
z-index: 6;
}
.bpM98:nth-of-type(10),
.conM98 > span:nth-of-type(9) {
 z-index: 4;
}
.bpM98:nth-of-type(11),
.conM98 > span:nth-of-type(10) {
 z-index: 2;
}
.conM98 input:checked + label + span, input:checked + .bpM98, input:checked + .porM98.aa {
 animation: inhe .6s both;
}
@keyframes inhe {
 99% {z-index: 20;}
 100% {z-index: inherit;}
}
@keyframes port {
 99% {z-index: 30;}
 100% {z-index: 0;}
}
.porM98.aa > div {
 height: 100%;
 background-position: center;
 border: 10px solid #0006;
 position: relative;
 text-shadow: 1px 1px #000D, -1px 1px #000D, 1px -1px #000D, -1px -1px #000D;
 backface-visibility: hidden;
}
.porM98.aa > div + div {
 position: absolute;
 width: 100%;
 top: 0;
 transform: rotateY(180deg);
 border-color: transparent;
 box-shadow: inset 0 0 0 1px #DDD;
 text-shadow: none;
}
.ttM98 {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 text-align: center;
 padding: 20px 0;
}
.ttM98::before, .ttM98::after {
 content: "";
 border-top: 2px dotted;
 border-left: 2px dotted;
 border-right: 2px dotted;
 position: absolute;
 width: calc(100% - 20px);
 height: 30px;
 left: 10px;
 opacity: .8;
}
.ttM98:before {
 top: 0;
}
.ttM98:after {
 bottom: 0;
 transform: rotate(180deg);
}
.ttM98 b {
 font: 40px Ruge Boogie;
}
.porM98.aa > div strong, .miM98 {
 position: absolute;
 bottom: 0;
 width: 100%;
 text-align: center;
 text-transform: uppercase;
 letter-spacing: 5px;
 transform: scale(.8);
 transition: .5s;
 left: 0;
}
.porM98.aa > div:hover strong, .miM98:hover {
 transform: scale(1);
}
.pagM98.con {
 border-left: 1px solid #DDD;
 z-index: 1;
}
.pagM98.con::before {
 content: "";
 border: 1px solid #DDD;
 position: absolute;
 top: 10px;
 left: 10px;
 right: 10px;
 bottom: 10px;
}
.miM98 {
 font-weight: bold;
 margin: 0 0 10px -2px;
 z-index: -1;
}