首页 > 其他分享> > 原生JS实现书本立体特效

原生JS实现书本立体特效

2019-08-11 09:43:09 作者：互联网

给大家分享一个原生JS实现的书本立体特效，效果如下：

实现这个特效需要的三张图片如下：

第一张图：0.jpg

第二张图 1.jpg

第三张图：3.jpg

实现代码如下，欢迎大家复制粘贴。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>原生JS实现书本立体特效</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #book {
            width: 290px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -200px 0 0 -145px;
            background: black;
            transform-style: preserve-3d;

        }

        #book .page {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #ccc;
        }

        #book .topNode {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(images/2.jpg);
            background-size: 290px 400px;
        }

        #book .bottom {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(images/1.png);
            background-size: 290px 400px;
        }

        #backNode {
            height: 100%;
            width: 50px;
            background: url(images/0.png);
            position: absolute;
            background-size: 50px 400px;
            /*translateZ为width一半*/
            transform: rotateY(90deg) translateZ(-25px);
        }
    </style>
</head>

<body>
    <div id='book'>
        <div id='backNode'></div>
    </div>
    <script type="text/javascript">

        /*上面的page*/
        for (var i = 0; i < 25; i++) {
            var oPage = document.createElement('div');
            oPage.className = 'page';
            if (i == 24) {
                oPage.className = 'topNode';
            }
            oPage.style.transform = 'translateZ(' + i + 'px)';
            book.appendChild(oPage);
        }

        /*下面的page*/
        for (var i = 0; i < 25; i++) {
            var oPage = document.createElement('div');

            oPage.className = 'page';

            oPage.style.transform = 'translateZ(' + (-i) + 'px)';
            if (i == 24) {
                oPage.className = 'bottom';
                //图片要镜像
                oPage.style.transform = 'translateZ(' + (-i) + 'px) scaleX(-1)';
            }
            book.appendChild(oPage);
        }


        var reg = 0;
        //让书旋转起来
        setInterval(function () {
            reg++;
            book.style.transform = 'perspective(800px) rotateY(' + (reg) + 'deg)';
        }, 4);

    </script>
</body>

</html>

标签：特效,style,100%,transform,oPage,book,background,JS,书本
来源： https://blog.csdn.net/weixin_40629244/article/details/99120996