JS1K是JavaScript编程竞赛——参加竞赛的规则很简单，脚本必须小于1K，竞赛网站开始也只是为了娱乐，却意外地收到了很多优秀的作品。

这是2016年JS1k上传的作品，用几十行代码实现的一个3D旋转魔方：

代码如下：

function z(t, e) {

return t? e? t.appendChild(e) : "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]] ? m[i][u][a] = r+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 ? 90 * n : 0)

+ "deg)"+r+"Y(" + (4 > n ? 0 : 4 == n ? -90 : 90) + "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如何实现旋转的魔方，浏览器从其他标签页回来依然匀速旋转？

Document

.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)

}

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 ? '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) { //处于当前页面

// timer = setInterval(() => {

// rotate();

// }, 1000);

// console.log('active');

// } else {

// clearInterval(timer);

// console.log('hidden');

// }

// });

}