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

最新推荐文章于 2024-08-21 08:26:07 发布

漏刻有时

最新推荐文章于 2024-08-21 08:26:07 发布

阅读量692

点赞数 1

分类专栏：漏刻有时 javascript

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/107236555

版权

漏刻有时同时被 2 个专栏收录

287 篇文章 17 订阅

订阅专栏

javascript

190 篇文章 6 订阅

订阅专栏

插件核心源于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; /*页面翻转，不镂空*/
}