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. 前言打了两年的百度之星,都没进决赛.我最大的感受就是还是太弱,总结起来就是:人弱就要多做题,人傻就要多做题.题目还是按照分类做可能效果比较好,因此,就有了做几个系列的计划.这是系列中的第一个,解 ...

随机推荐

git如何配置邮箱和用户名?
答: 1. 配置邮箱 git config --global user.email "jello_smith@163.com" 2. 配置用户名 git config --glob ...
c++ throw异常(学习)
#include <iostream>#include <stdio.h> using namespace std; void my_copy(const char* src_ ...
常见MIME类型列表整理
译者注:英文原文标题为 Incomplete list of MIME types,意为不完整的/未完成的 MIME 类型列表. 这是一份 MIME 类型列表,以及各个类型的文档类别,按照它们的常见扩 ...
MyBatis接口式编程
MyBatis使用接口连接数据库之前学习了如何传统的使用MyBatis连接数据库,今天学习如何使用更方便快捷的方式练级数据库.使用接口连接数据库 https://www.cnblogs.com/li ...
SQL注入（字符型）
靶场:sqli-labs @SQLi最重要的一点:别上来就对着输入框注入,完整语句写出来,始终在语句中写完整的,最后把完整的一部分截取出来作为输入 @URL编码:为避免歧义,URL中,如 %2b ...
【编程开发】 C与C++中的关于函数指针的强制类型转换与指针函数的关系
[编程开发] C与C++中的关于函数指针的强制类型转换与指针函数的关系标签: [编程开发] [VS开发] 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 以 ...
C#,CLR，IL，JIT概念以及 .NET 家族
C#,CLR,IL,JIT概念以及 .NET 家族 Monitor 类通过向单个线程授予对象锁来控制对对象的访问.对象锁提供限制访问代码块(通常称为临界区)的能⼒.当⼀个线程拥有对象的锁时,其 ...
springboot datajpa 简明说明
findById返回Optional的使用查询 public Object lookupDevice(Integer id) { return deviceJpa.findById(id).orEl ...
GrapeCity Documents （服务端文档API组件） V3.0 正式发布
近日,葡萄城GrapeCity Documents(服务端文档API组件)V3.0 正式发布! 该版本针对 Excel 文档.PDF 文档和 Word 文档的 API 全面更新,加入了用于生成 Exc ...
oracle数据库用户之间授权
今天遇到一个数据库的问题: 系统数据库用户下创建了几个视图用于外部系统开发报表使用,当外部系统提取视图数据时,需要通过一个只能访问需要视图权限的用户,于是想到给他创建一个新的用户,并给这个用户分配只能 ...

JS实现旋转的魔方

js

html

css

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

随机推荐

热门专题