JS实现旋转的魔方

<script>
    window.onload = function () {
        let cube = document.querySelector('.cube')
        let timer = null
        let x = 0; y = 0;
        function rotate() {
            cube.style.transform = 'rotateX(' + x + 'deg)' + '' + 'rotateY(' + y + 'deg)';
            x += 30
            y += 45
        }
        function stop() {
            clearInterval(timer)
        }
        clearInterval(timer);
        timer = setInterval(() => {
            rotate();
        }, 1000);

       //考虑兼容性
        var hiddenProperty = 'hidden' in document ? 'hidden' :
            'webkitHidden' in document ? 'webkitHidden' :
                'mozHidden' in document ? 'mozHidden' :
                    null;
        var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
        var onVisibilityChange = function () {
            if (!document[hiddenProperty]) {
                timer = setInterval(() => {
                    rotate();
                }, 1000);
                console.log(hiddenProperty);
            } else {
                clearInterval(timer)
            }
        }
       //不考虑兼容性
        document.addEventListener(visibilityChangeEvent, onVisibilityChange);
        // document.addEventListener("visibilitychange", function () {
        //     if (!document.hidden) {   //处于当前页面
                     rotate();
        //         timer = setInterval(() => {
        //             rotate();
        //         }, 1000);
        //         console.log('active');
        //     } else {
        //         clearInterval(timer);
        //         console.log('hidden');
        //     }
        // });
    }
</script>

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="cube" onclick="stop()">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
    </div>
</body>
</html>


<style>
    .cube {
        width: 400px;
        height: 400px;
        transition: all 3s;
        margin: 300px auto;
        /* 作用于所有3d转换的子元素 设置给父级 */
        /* perspective: 1000px; */
        /* transform: rotateX(30deg) rotateY(45deg); */
        /* 平面到立方  默认值:平面flat*/
        transform-style: preserve-3d;

        position: relative;
    }
    .front,
    .back,
    .left,
    .right,
    .top,
    .bottom {
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 400px;
        position: absolute;
        opacity: 0.9;
        left: 0;
        top: 0;
    }
    .front {
        background-color: palevioletred;
        background-image: url('http://img1.gtimg.com/tj/pics/hv1/117/208/2153/140051982.jpg');
        transform: translateZ(200px);
    }

    .back {
        background-color: yellow;
        transform: translateZ(-200px);
        background-image: url('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=841408372,3004217725&fm=11&gp=0.jpg');
    }
    .left {
        background-color: pink;
        background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2388632836,3966607624&fm=26&gp=0.jpg');
        transform: rotateY(90deg) translateZ(-200px)
    }
    .right {
        background-color: yellowgreen;
        background-image: url('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=192610795,467565159&fm=26&gp=0.jpg');
        transform: rotateY(90deg) translateZ(200px)
    }
    .top {
        background-color: skyblue;
        background-image: url("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2936477803,4198185787&fm=15&gp=0.jpg");
        transform: rotateX(90deg) translateZ(200px)
    }
    .bottom {
        background-color: orange;
        background-image: url('http://img0.pclady.com.cn/pclady/1611/02/1612285_jyz.jpg');
        transform: rotateX(90deg) translateZ(-200px)
    }
</style>

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/wwj007/p/11251485.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-11-17 14:55:00
阅读 ( 824 )
分类：前端

JS实现旋转的魔方

js

html

css

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看