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>

JS实现旋转的魔方的更多相关文章

解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
CSS3制作太极图以及用JS实现旋转太极图
太极图可以理解为一个一半黑一半白的半圆,上面放置着两个圆形,一个黑色边框白色芯,一个白色边框黑色芯. 1.实现黑白各半的圆形. .box{ width:200px;height:200px; bor ...
jquery.rotate.js实现旋转动画
1.页面引入jquery.rotate.js文件, 下载地址:https://files.cnblogs.com/files/zhoujl-5071/jquery.rotate.js(打开这个网址,c ...
JS框架_(coolShow.js)图片旋转动画特效
百度云盘传送门密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
js图片旋转
<script type="text/javascript" language="javascript"> function rotate(id, ...
js立体旋转展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
three.js 制作魔方
因为之前的几节讲了一些数学方法,例如Vector3.Matrix4.Euler还有Quaternion的知识.所以这篇郭先生就来说说用three.js怎么制作一个魔方.在线案例请点击博客原文制作魔方 ...
用DirectX实现魔方（一）
关于魔方魔方英文名字叫做Rubik's Cube,是由匈牙利建筑学教授和雕塑家Ernő Rubik于1974年发明,最初叫做Magic Cube(这大概也是中文名字的来历吧),1980年Ideal ...
【ACM】魔方十一题
0. 前言打了两年的百度之星,都没进决赛.我最大的感受就是还是太弱,总结起来就是:人弱就要多做题,人傻就要多做题.题目还是按照分类做可能效果比较好,因此,就有了做几个系列的计划.这是系列中的第一个,解 ...

随机推荐

js常用时间转换函数
1.秒转换为时分秒 // 秒转换为时分秒 export function secExchangeMoment(value = 0){ let secondTime = parseInt(value); ...
python 获取昨天的日期
from datetime import timedelta, datetime yesterday = datetime.today()+timedelta(-1) yesterday_format ...
Windows7下IIS+php配置教程
WINDOWS 7 IIS+php配置教程,具体内容如下打开开始 -> 控制面板 -> 程序与功能 -> 打开或关闭windows功能勾选Internet信息服务,并点击前面的 ...
[Scikit-learn] 1.1 Generalized Linear Models - Comparing various online solvers
数据集分割一.Online learning for 手写识别 From: Comparing various online solvers An example showing how diffe ...
JAVA 基础编程练习题25 【程序 25 求回文数】
25 [程序 25 求回文数] 题目:一个 5 位数,判断它是不是回文数.即 12321 是回文数,个位与万位相同,十位与千位相同. package cskaoyan; public class cs ...
不要在viewWillDisappear:方法中移除通知
都知道viewWillAppear:方法是在控制器的view将要显示的时候调用的,而viewWillDisappear:方法是在控制器的view将要隐藏的时候调用. 这看上去没什么问题,键盘的显示和隐 ...
处理HTTP请求
处理HTTP请求当客户端浏览器通过URL访问web应用时,首先要做的就是获取用户提交的信息,也就是从HTTP请求数据中获得的信息.HTTP请求数据分为HTTP请求头和Body HTTP请求头包含了一 ...
Flutter 路由页面间跳转和传参返回
Navigator Navigator用来管理堆栈功能(即push和pop),在Flutter的情况下,当我们导航到另一个屏幕时,我们使用Navigator.push方法将新屏幕添加到堆栈的顶部.当然 ...
SQL注入（字符型）
靶场:sqli-labs @SQLi最重要的一点:别上来就对着输入框注入,完整语句写出来,始终在语句中写完整的,最后把完整的一部分截取出来作为输入 @URL编码:为避免歧义,URL中,如 %2b ...
java 公共类
package com.javaweb.mvc; import java.text.*; import java.util.Date; import java.util.Random; public ...

JS实现旋转的魔方

js

html

css

JS实现旋转的魔方的更多相关文章

随机推荐

热门专题