原生JS实现书本立体特效-CFANZ编程社区

原生JS实现书本立体特效

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

原生JS实现书本立体特效_JavaScript

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

第一张图：0.jpg

原生JS实现书本立体特效_html_02

第二张图 1.jpg

原生JS实现书本立体特效_前端开发_03

第三张图：3.jpg

原生JS实现书本立体特效_html_04

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

<!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 .top {
            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.jpg);
            background-size: 290px 400px;
        }

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

<body>
    <div id='book'>
        <div class="back"></div>
    </div>


    <script type="text/javascript">

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

        // 下面的page
        for (var i = 0; i < 25; i++) {
            var div = document.createElement('div');
            div.className = 'page';
            div.style.transform = 'translateZ(' + (-i) + 'px)';
            if (i == 24) {
                div.className = 'bottom';
                // 图片要镜像
                div.style.transform = 'translateZ(' + (-i) + 'px) scaleX(-1)';
            };
            book.appendChild(div);
        };
        var deg = 0;
        // 让书旋转起来
        setInterval(function () {
            deg++;
            book.style.transform = 'perspective(800px) rotateY(' + (deg) + 'deg)';
        }, 4);

    </script>

</body>

</html>

0 条评论