page-flip
Version:
Powerful, simple and flexible JS Library for creating realistic and beautiful page turning effect
61 lines (52 loc) • 815 B
CSS
.stf__parent {
position: relative;
display: block;
box-sizing: border-box;
transform: translateZ(0);
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.sft__wrapper {
position: relative;
width: 100%;
box-sizing: border-box;
}
.stf__parent canvas {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.stf__block {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
perspective: 2000px;
}
.stf__item {
display: none;
position: absolute;
transform-style: preserve-3d;
}
.stf__outerShadow {
position: absolute;
left: 0;
top: 0;
}
.stf__innerShadow {
position: absolute;
left: 0;
top: 0;
}
.stf__hardShadow {
position: absolute;
left: 0;
top: 0;
}
.stf__hardInnerShadow {
position: absolute;
left: 0;
top: 0;
}