铁雪资源网 Design By www.gsvan.com
JS1K是JavaScript编程竞赛——参加竞赛的规则很简单，脚本必须小于1K，竞赛网站开始也只是为了娱乐，却意外地收到了很多优秀的作品。
这是2016年JS1k上传的作品，用几十行代码实现的一个3D旋转魔方：
代码如下：
function z(t, e) {
return t"width:"+t+"px;height:"+t+"
px;position:absolute;" : document.createElement("div")
}
function w() {
++t==360&&(t=0, x=++x%3)
for (i in m) 2 == m[i][s[x]] "(" + t + "deg)" : 0;
c[u][a] = r+"3d(1,1,1," + t + "deg)",
requestAnimationFrame(w)
}
var a = "transform",
p = "background-color:",
y = a+"-style:preserve-3d;",
u = "style",
v = "cssText",
B = z(),
c = z(),
t = x = 0,
d, e, f, g, h, k, l, m = [], n, i, r="rotate", s = ["X","Y","Z"];
B[u][v] = "perspective:900px;"+z(600)+p+"#666";
c[u][v] = y + z(240) +"top:30%;left:30%", z(B, c), z(window.b, B);
for (l = 27; l--; z(c, f)) {
f = z(),
f[u][v] = y + z(240),
f.X = g = l % 3,
f.Y = h = (l - g) % 9 / 3,
f.Z = k = ~~(l / 9), e = z(),
e[u][v] = y + z(80) +a+":translate3d(" + 80 * g + "px," +
80 * h + "px," + 80 * (k-1) + "px)";
for (n = 6; n--; z(e, d))
d = z(),
d[u][v] = y + z(72) + "border-radius:9px;border:4px solid
#000;opacity:0.9;"+a+":"+r+"X(" + (4 > n "deg)"+r+"Y(" + (4 > n "deg)translateZ(40px);"+p+
(0==n&&2==k"#05C":1==n&&0==h"#FD0":
2==n&&0==k"#0A6":3==n&&2==h"#FFF":4==n&&0==g"#F60":5==n&&2==g"#C24":"#000");
z(f, e), m.push(f)
}
w();
知识点扩展
JS如何实现旋转的魔方，浏览器从其他标签页回来依然匀速旋转？
<!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>
<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;
}
/* div:hover {
transform: rotateY(90deg) translateZ(-200px);
opacity: 0.5;
} */
.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>
<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);
// 监听是否在当前页，并置为已读
// document.addEventListener("visibilitychange", function () {
// if (document.hidden) { //不处于当前页面
// // do something
// clearInterval(timer)
// } else {
// timer;
// }
// });
var hiddenProperty = 'hidden' in document "visibilitychange", function () {
// if (!document.hidden) { //处于当前页面
// timer = setInterval(() => {
// rotate();
// }, 1000);
// console.log('active');
// } else {
// clearInterval(timer);
// console.log('hidden');
// }
// });
}
</script>
</html>
标签：
JS,3D魔方
铁雪资源网 Design By www.gsvan.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无JavaScript实现的3D旋转魔方动画效果实例代码的评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。