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. 前言打了两年的百度之星,都没进决赛.我最大的感受就是还是太弱,总结起来就是:人弱就要多做题,人傻就要多做题.题目还是按照分类做可能效果比较好,因此,就有了做几个系列的计划.这是系列中的第一个,解 ...
随机推荐
- Vue中可用的判断对象是否为空的方法
vue有两个方法可用 1. JSON.stringify(evtValue)=='{}' 2. Object.keys(xxx).length==0 js判断对象是否为空对象的几种方法 1.将json ...
- Maven 引入外部依赖
pom.xml 的 dependencies 列表列出了我们的项目需要构建的所有外部依赖项. 要添加依赖项,我们一般是先在 src 文件夹下添加 lib 文件夹,然后将你工程需要的 jar 文件复制到 ...
- 关于一个GPGPU优化中Bank Conflict的讨论
出自OpenGPU: 关于去除bank conflict的一个例子程序
- 文件上传跨域解决方案-jQuery-File-Upload
GIT 下载地址 https://github.com/blueimp/jQuery-File-Upload 亲测HTTPS HTTP跨域无压力 不用自带的DEMO 用下面的DEMO <!DOC ...
- Android 中View的工作原理
Android中的View在Android的知识体系中扮演着重要的角色.简单来说,View就是Android在视觉的体现.我们所展现的页面就是Android提供的GUI库中控件的组合.但是当要求不能满 ...
- GBDT详解例子
https://blog.csdn.net/zpalyq110/article/details/79527653
- 生动详细解释javascript的冒泡和捕获
原文:Event order 翻译:hh54188的博客 前言:虽然精通jquery,但对它的原型javascript却不是很了解,最近在学习javascript中遇到了一些困难,比如冒泡和捕获,很多 ...
- 微信小程序如何修改本地缓存key中的单个数据
假如用户注册后,获得用户手机号和userid,realName默认为0,然后进入B页面进行实名认证,认证成功后realName变为1,再更新缓存里的用户信息. A页面用户注册后,存储用户信息: var ...
- Unity Shader基础:编译指令
UntiyShader中,编译指令分为两种: 1.顶点片元着色器(Vetex & Fragment Shader)使用的编译指令 2.表面着色器(Surface Shader)使用的编译指令 ...
- elasticsearch安装ik
https://github.com/medcl/elasticsearch-analysis-ik/releases下载对应的ik plugins/目录下创建analysis-ik,再将上述中的zi ...