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. 前言打了两年的百度之星,都没进决赛.我最大的感受就是还是太弱,总结起来就是:人弱就要多做题,人傻就要多做题.题目还是按照分类做可能效果比较好,因此,就有了做几个系列的计划.这是系列中的第一个,解 ...
随机推荐
- Node.js与VUE安装及环境配置之Windows篇
Node.js安装及环境配置之Windows篇 https://www.cnblogs.com/zhouyu2017/p/6485265.html Node.js安装及环境配置之Windows篇htt ...
- API网关的用处
API网关我的分析中会用到以下三种场景. Open API. 企业需要将自身数据.能力等作为开发平台向外开放,通常会以rest的方式向外提供,最好的例子就是淘宝开放平台.腾讯公司的QQ开发平台.微信开 ...
- linux下如何使rtc设备注册为指定的设备文件/dev/rtc1?
答: 通过设备树中的aliases节点来指定即可; 如某rtc设备的节点名为rtc@68,那么想让系统为该设备生成指定的设备文件/dev/rtc1,那么就在设备树的根节点中增加aliases节点,示例 ...
- SQL-W3School-高级：SQL CREATE INDEX 语句
ylbtech-SQL-W3School-高级:SQL CREATE INDEX 语句 1.返回顶部 1. CREATE INDEX 语句用于在表中创建索引. 在不读取整个表的情况下,索引使数据库应用 ...
- Node.js使用Express实现Get和Post请求
var express = require('express'); var app = express(); // 主页输出 "Hello World" app.get('/', ...
- windows7-maven配置
1.确认jdk安装 2.下载 3.解压缩 4.配置环境变量 (1)计算机属性--高级系统配置--高级--环境变量---系统变量--新建 (2)添加环境变量 MAVEN_HOME PATH中添加到mav ...
- 在linux服务器以及客户端实现公钥免密登录
每次登录服务器都要输入密码,这点比较麻烦.使用ssh公钥登录机制可以直接登录,避免每次都输入密码的烦恼. 所谓ssh公钥登录机制即是:客户端电脑client产生加密用的公钥id_rsa.pub与私钥i ...
- c语言ARP应用
对于windows环境,winsock不能用来发ARP请求: 发表于: 2002-04-23 11:45:12 arp是请求硬件地址的.winsock层次太高啦... 用winsock中的sendto ...
- 使用 pycharm调试docker环境运行的Odoo
2019日 星期一 安装docker windows系统,参考 docker官方文档 Mac系统,参考 docker官方文档 构建自定义ODOO镜像 标准ODOO镜像可能不包含特别的python模块, ...
- 洛谷 题解 P1220 【关路灯 】
搜索 传参 inline void DFS(int now,int l,int r,int cnt,int sum,int k) /* now为当前点 l为左端点 r为右端点 cnt为当前耗电量 su ...