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

随机推荐

18.flannel
18.flannel docker有四种常用网络 bridge joined opended 直接共享使用节点的网络名称空间 none k8s网络通信: 容器间的通信: 同一个Pod内的多个容器之间通 ...
Kibana Query Language(KQL)
语法: 官方文档 If you’re familiar with Kibana’s old lucene query syntax, you should feel right at home wit ...
Python描述性统计numpy
import numpy as np import pandas as pd import matplotlib.pyplot as plt from sklearn import datasets, ...
PyTorch载入图片后ToTensor解读（含PIL和OpenCV读取图片对比）
概述 PyTorch在做一般的深度学习图像处理任务时,先使用dataset类和dataloader类读入图片,在读入的时候需要做transform变换,其中transform一般都需要ToTensor ...
1-18-2 LVM管理和ssm存储管理器使用&磁盘配额 (二)
LVM管理和ssm存储管理器使用&磁盘配额 (二) 内容如下: ü LVM快照 ü ssm存储管理器的使用 ü 磁盘配额第1章 LVM快照 lvm快照:为了保持系统的一致性,我们先做 ...
CentOS7.5使用RPM包安装MySQL5.7.22
参考:https://blog.csdn.net/sevenkoala/article/details/76163853 1,安装环境查看 2,下载安装rpm包下载地址:https://downlo ...
SpringBoot： 16.整合junit单元测试（转）
1.创建maven项目,修改pom.xml文件  <parent> <groupId>org.springfram ...
iOS-同步下载与异步下载
一.同步下载(交互不好,容易出现卡死现象,一般下载数据较小或有特定需求才使用). 发送同步请求后,程序将停止用户交互,直到服务器返回数据完成后,才进行下一步的操作. //第一步:创建URL NSURL ...
typing-python用于类型注解的库
简介动态语言的灵活性使其在做一些工具,脚本时非常方便,但是同时也给大型项目的开发带来了一些麻烦. 自python3.5开始,PEP484为python引入了类型注解(type hints),虽然在p ...
Chrome安装json格式化工具jsonView
1.下载jsonView 有条件的童鞋可以去谷歌商店下载安装https://chrome.google.com/webstore/detail/pmajcnnfhjcebiafkonednglookd ...

JS实现旋转的魔方

js

html

css

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

随机推荐

热门专题