body{margin:0;height:100vh;display:flex;justify-content:center;align-items:center;}
input{display:none;}
img{width:100%;height:100%;}
.container{display:flex;}
#cover{width:450px;height:600px;-webkit-box-shadow: 0px 0px 6px 0px rgba(138,138,138,1);
-moz-box-shadow: 0px 0px 6px 0px rgba(138,138,138,1);
box-shadow: 0px 0px 6px 0px rgba(138,138,138,1);}
.page-container{width:450px;height:600px;position:relative;perspective:1500px;}
.page{width:100%;height:100%;position:absolute;top:0;left:0;transform-origin:left;transform-style:preserve-3d;transform:rotateY(0deg) !important;transition:.5s;}
.front, .back{position:absolute;width:100%;height:600px;top:0;left:0;}
.front{box-sizing:border-box;-webkit-box-shadow: 0px 0px 6px 0px rgba(189,189,189,1);
-moz-box-shadow: 0px 0px 6px 0px rgba(189,189,189,1);
box-shadow: 0px 0px 6px 0px rgba(189,189,189,1);}
.back{transform:rotateY(180deg) !important;backface-visibility:hidden;}
.next-btn{position:absolute;top:0px;right:0px;cursor:pointer;background:black;color:#fff;padding: 0px 8px;font-size:13px;}
.back-btn{position:absolute;top:0px;left:0px;cursor:pointer;background:black;color:#fff;padding: 0px 8px;font-size:13px;}
#p1{z-index:9;}
#p2{z-index:8;}
#p3{z-index:7;}
#p4{z-index:6;}
#p5{z-index:5;}
#p6{z-index:4;}

#p7{z-index:3;}
#p8{z-index:2;}
#p9{z-index:1;}


#c1:checked ~ .page-container #p1{transform:rotateY(-180deg) !important;z-index:1;}
#c2:checked ~ .page-container #p2{transform:rotateY(-179.9deg) !important;z-index:2;}
#c3:checked ~ .page-container #p3{transform:rotateY(-180deg) !important;z-index:3;}
#c4:checked ~ .page-container #p4{transform:rotateY(-179.9deg) !important;z-index:4;}
#c5:checked ~ .page-container #p5{transform:rotateY(-180deg) !important;z-index:5;}
#c6:checked ~ .page-container #p6{transform:rotateY(-180deg) !important;z-index:6;}

#c7:checked ~ .page-container #p7{transform:rotateY(-180deg) !important;z-index:7;}
#c8:checked ~ .page-container #p8{transform:rotateY(-180deg) !important;z-index:8;}
#c9:checked ~ .page-container #p9{transform:rotateY(-180deg) !important;z-index:9;}

#p3{background:blue;}