JS实现旋转的魔方

2024-01-15 11:46:16

<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>

码农公寓

相关文章