JS实现旋转的魔方
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>
css
<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. 前言打了两年的百度之星,都没进决赛.我最大的感受就是还是太弱,总结起来就是:人弱就要多做题,人傻就要多做题.题目还是按照分类做可能效果比较好,因此,就有了做几个系列的计划.这是系列中的第一个,解 ...
随机推荐
- 强悍的Python读取大文件的解决方案
这是一道著名的 Python 面试题,考察的问题是,Python 读取大文件和一般规模的文件时的区别,也即哪些接口不适合读取大文件. 1. read() 接口的问题 f =open(filename, ...
- js图片转base64编码
let reader = new FileReader(); reader.readAsDataURL(file.raw); reader.onload = () => { let imageU ...
- Apache损坏无法使用怎么办
已经 find / -name httpd | xargs rm -rf删光了httpd相关文件,但是使用yum install httpd 无法正常安装. 查看Httpd的状态是 解决办法: yum ...
- 将python包发布到PyPI和制作whl文件
参考链接:wheel和egg的不同怎样将自己写的包传达到PyPi发布你自己的轮子 - PyPI打包上传实践PyPI官网上传包教程 wheel文件Wheel和Egg都是python的打包格式,目的是支持 ...
- Vue Cli 3 初体验（全面详解）
vue新出了 vue cli 3,并直接改名为 @vue/cli,今天就来盘他. 首先介绍等啰里啰嗦的就不写了,贴个link吧. Vue CLi3 github Vue CLi web 要是想先了解下 ...
- 用cmd命令加密文件夹
比如新建一个叫“大学财务”的文件夹,我希望这个文件夹下的内容是加密隐藏的. 查看的时候需要点击“大学财务.bat”这个文件,然后输入设置的密码即可. Cls @ECHO OFF title Folde ...
- vue8种通信方式
参考:https://juejin.im/post/5d267dcdf265da1b957081a3#heading-1(写的很详细) https://blog.csdn.net/songxiu ...
- 理解、学习与使用 JAVA 中的 Optional【转载】
这是一篇转载的文章.刚学java的时候看了好久这个Optional,但一直是懵的.今天又又遇到了,重新回来再看的时候,发现并没有那么难道那个. 转载的文章再开头处写了一个对于理解Optional很关键 ...
- 可执行jar包与依赖jar包
1.在IDEA的pom文件中有如下配置的,打包出来的是可执行jar包,可执行jar包不能作为依赖. <build> <plugins> <plugin> <g ...
- 改变checkbox默认样式
input[type='checkbox']{ width: 5rem; height: 5rem; -webkit-appearance: none; /*清除复选框默认样式*/ backgroun ...