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. 前言打了两年的百度之星,都没进决赛.我最大的感受就是还是太弱,总结起来就是:人弱就要多做题,人傻就要多做题.题目还是按照分类做可能效果比较好,因此,就有了做几个系列的计划.这是系列中的第一个,解 ...
随机推荐
- Heat map 绘图神奇
https://study.163.com/provider/400000000398149/index.htm?share=2&shareId=400000000398149(博主视频教学主 ...
- VUE组件如何通信
Vue父子组件如何通信? 子组件通知父组件(调用父组件方法) 在父组件使用 on(eventName)监听事件,在子组件使用emit(eventName) 触发事件 : 父组件通知子组件(调用子组件方 ...
- SQL-W3School-高级：SQL CREATE INDEX 语句
ylbtech-SQL-W3School-高级:SQL CREATE INDEX 语句 1.返回顶部 1. CREATE INDEX 语句用于在表中创建索引. 在不读取整个表的情况下,索引使数据库应用 ...
- realsense数据分析
line: (434,300) (453,144) (0,0,0),(-0.926698,-1.25853,2.032) 0.781452 ------------------------------ ...
- ubuntu Tensorflow object detection API 开发环境搭建
https://blog.csdn.net/dy_guox/article/details/79111949 luo@luo-All-Series:~$ luo@luo-All-Series:~$ s ...
- shell脚本中用到的计算
在shell脚本中计算一般会涉及到let.$(()).$[].bc(另扩展expr).其中let.$(()).$[]都是用来做基本整数运算,bc可以用来做浮点运算. (1).let.$(()).$[] ...
- array_splice 在数组某位置插入数据
$arr=array('a','b','c','d','e','f','g');//目标数组 $i_arr=array(');//要插入的数组 $n=;//插入的位置 array_splice($ar ...
- 文件上传跨域解决方案-jQuery-File-Upload
GIT 下载地址 https://github.com/blueimp/jQuery-File-Upload 亲测HTTPS HTTP跨域无压力 不用自带的DEMO 用下面的DEMO <!DOC ...
- [!] The version of CocoaPods used to generate the lockfile (1.4.0.beta.1) is higher than the version of the current executable (1.3.0.beta.1). Incompatibility issues may arise.
今天在看一个开源Demo代码的时候,需要执行pod install命令,直接报错如下: 解决方法: 执行:pod update 命令更新资源库即可.
- js 高级程序设计 第三章学习笔记——Number数据类型需要注意的事项
1.浮点数值 虽然小数点前面可以没有整数,但是并不推荐这种写法. 由于保存浮点数值需要的内存空间是保存整数值的两倍,因此ECMAScript会不失时机地将浮点数值转化为整数数值.显然,如果小数点后面没 ...