数据可视化大屏使用ipad-page-flip插件JS库制作Flipping Book的样式表解决方案

插件核心源于ipad-page-flip。

演示效果： 样式表需要注意的几个细节：

/*page/front/back内部禁止绝对定位样式
1.导致翻转黑屏；
2.页面错乱
Design by Poleung 2020.07.09*/
.scene {
    width: 40%; /*页面宽度*/
    height: 90%;
    margin: 3% 5% 5% 50%;
    perspective: 1000px;
}

.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 5%;
    box-sizing: border-box;
    backface-visibility: hidden;
    background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
    background: linear-gradient(to bottom right, #fff, #ccc);
    z-index: 9999; /*页面翻转，不镂空*/
}

Done！