#page-flip {
width: 100%;
display: inline-block;
position: relative;
}
#page-flip:after {
padding-top: 90%;
display: block;
content: '';
}
.pages-container {
position: absolute;
width: 100%;
height: 100%;
}
.page-left, .page-right {
position: absolute;
width: 50%;
height: 86%;
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
}
.page-left {
background-position: left center;
border-top-right-radius: 1%;
left: 0%;
}
.page-right {
background-position: right center;
border-top-left-radius: 1%;
right: 0%;
}
.page-left .page-middle, .page-right .page-middle {
width: 4%;
height: 100%;
}
.page-left .page-middle {
float: right;
background: linear-gradient(to left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
border-top-right-radius: 10%;
}
.page-right .page-middle {
float: left;
background: linear-gradient(to right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
border-top-left-radius: 10%;
}
.page-left .page-grabber, .page-right .page-grabber {
width: 20%;
height: 100%;
cursor: pointer;
}
.page-left .page-grabber {
float: left;
}
.page-right .page-grabber {
float: right;
}
.page-left .page-grabber .page-fold, .page-right .page-grabber .page-fold {
position: absolute;
width: 0%;
height: 0%;
transition: width 0.5s, height 0.5s;
border-bottom-width: 1px;
border-bottom-color: #dddddd;
border-bottom-style: solid;
}
.disable-click {
position: absolute;
width: 50%;
height: 86%;
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
}
.disable-click .page-middle {
display: none;
}
.disable-click .page-grabber {
cursor: default;
}
.disable-click .page-fold {
width: 0% !important;
height: 0% !important;
}
.reduce-to-left, .reduce-to-right {
z-index: 0;
width: 0%;
}
.reduce-to-left {
left: 50%;
background-position: right center !important;
transition: width 0.5s linear, left 0.5s linear;
}
.reduce-to-right {
right: 50%;
background-position: left center !important;
transition: width 0.5s linear, right 0.5s linear;
}
.page-left .page-fold {
left: 0;
border-right-width: 1px;
border-right-color: #dddddd;
border-right-style: solid;
box-shadow: 5px 5px 10px #dddddd;
background-image: linear-gradient(135deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(242, 242, 242) 51%, rgb(254, 254, 254) 100%);
}
.page-right .page-fold {
right: 0;
border-left-width: 1px;
border-left-color: #dddddd;
border-left-style: solid;
box-shadow: -5px 5px 10px #dddddd;
background-image: linear-gradient(45deg, rgb(254, 254, 254) 0%, rgb(242, 242, 242) 49%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%);
}
.page-grabber:hover .page-fold {
width: 4%;
height: 2.8%;
}
.hide-page-fold {
width: 0% !important;
height: 0% !important;
}
.next-page, .prev-page {
position: absolute;
height: 86%;
width: 0%;
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
}
.next-page {
right: 0%;
background-position: left center;
}
.prev-page {
left: 0%;
background-position: right center;
}
.turning-next-page, .turning-prev-page {
width: 50%;
z-index: 1;
}
.turning-next-page {
right: 50%;
-webkit-box-shadow: -5px 1px 18px -2px rgba(0,0,0,0.5);
-moz-box-shadow: -5px 1px 18px -2px rgba(0,0,0,0.5);
box-shadow: -5px 1px 18px -2px rgba(0,0,0,0.5);
transition: width 0.5s linear, right 0.5s linear;
}
.turning-prev-page {
left: 50%;
-webkit-box-shadow: -5px -2px 18px 1px rgba(0,0,0,0.5);
-moz-box-shadow: -5px -2px 18px 1px rgba(0,0,0,0.5);
box-shadow: -5px -2px 18px 1px rgba(0,0,0,0.5);
transition: width 0.5s linear, left 0.5s linear;
}
.right-brightness, .left-brightness {
z-index: 2;
}
.right-brightness {
right: 0%;
background: linear-gradient(to right, rgba(128,128,128,0) 0%,rgba(128,128,128,0.65) 100%);
}
.left-brightness {
left: 0%;
background: linear-gradient(to left, rgba(128,128,128,0) 0%,rgba(128,128,128,0.65) 100%);
}
.turning-left, .turning-right {
position: absolute;
height: 86%;
width: 0%;
z-index: 2;
}
.turning-left {
right: 50%;
transition: right 0.5s linear;
}
.turning-right {
left: 50%;
transition: left 0.5s linear;
}
.hidden-left-page, .hidden-right-page {
z-index: 1;
position: absolute;
width: 0%;
height: 86%;
background-color: transparent;
background-repeat: no-repeat;
background-size: cover;
}
.hidden-left-page {
left: 0%;
background-position: left center;
}
.hidden-right-page {
right: 0%;
background-position: right center;
}
.show-hidden-left-page, .show-hidden-right-page {
width: 49.5%;
transition: width 0.5s linear;
}
.page-flip-loader {
width: 40px;
height: 40px;
background-color: #333;
display: block;
margin: 0 auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}