JavaScript实现的三维(三维的缩写)旋转魔方动画效果实例代码

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

这是2016年JS1k上传的作品，用几十行代码实现的一个三维(三维的缩写)旋转魔方：

代码如下：

函数z(t，e){ 0返回t？e？t . appendchild(e): '宽度： ' t ' px高度： ' t ' pxposition:absolute':文档。创建元素(' div ')函数w() { t==360(t=0，x=x%3)对于(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]='透视' :900像素；z(600)p ' # 666 '；c[u][v]=y z(240)'前：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 ' : translate 3d(' 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)'边界半径：9 pxborder:4px固体# 000;'opa city 33600.9 ' a ' : ' r ' X(' 4n？90 * n : 0)' deg)' r ' Y '(4n？0 : 4==n？-90 : 90 ')平移(40px)；p (0==n2==k？#05C':1==n0==h？#FD0': 2==n0==k？#0A6':3==n2==h？#FFF':4==n0==g？#F60':5==n2==g？# C24 ' : ' # 000 ')；z(f，e)，m . push(f)} w()；知识点扩展

射流研究…如何实现旋转的魔方，浏览器从其他标签页回来依然匀速旋转？

！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 dy div class=' cube ' onclick=' stop()' div class=' front ' front/div class=' back ' back/div class=' left ' left/div class=' right ' right/div class=' top '立方体{宽度： 400像素高度： 400像素；过渡：所有3s；余量： 300像素汽车；/* 作用于所有三维(三维的缩写)转换的子元素设置给父级*//*透视图1000 px *//* transform : rotateX(30度)rotateY(45度);*//* 平面到立方默认值：平面flat */transform-style : preserve-3d；相对位置：}/* div :悬停{ transform : rotateY(90度)translateZ(-200 px)；opa city 3360 0.5 } */。前面。退后。向左，向右。好吧。顶，顶。底部{宽度： 100%;高度： 100%;文本对齐：中心；线高： 400像素；绝对位置：opa city 3360 0.9左： 0；top : 0；} .正面{背景色：浅红色；背景-图像： URL(' http://img 1。gtimg。com/TJ/pics/hv1/117/208/2153/140051982。jpg’)；transform : translateZ(200px)；} .背面{背景-颜色：黄色；transform : translateZ(-200 px)；背景图像： URL(' https://ss1。BD静态。com/70 cfuxsh _ q1ynxgkpowk1hf 6 hy/it/u=841408372，3004217725fm=11gp=0。jpg’)；} .左侧{背景-颜色：粉色；背景图像： URL(' https://ss0。BD静态。com/70 cfuhsh _ q1ynxgkpowk1hf 6 hy/it/u=2388632836，3966607624fm=26gp=0。jpg’)；变换：旋转(90度)平移ez(-200像素)} .右{背景色-颜色：黄绿色；背景图像： URL(' https://ss0。BD静态。com/70 cfuhsh _ q1ynxgkpowk1hf 6 hy/it/u=192610795，467565159fm=26gp=0。jpg’)；transform : rotateY(90度)translate ez(200px)} .top {底色：天蓝色；背景图像： URL(' https://ss0。BD静态。com/70 cfuhsh _ q1ynxgkpowk1hf 6 hy/it/u=2936477803，4198185787fm=15gp=0。jpg’)；变换：旋转(90度)平移(200像素)} .底部{背景-颜色：橙色；背景-图像： URL(' http://img 0。电脑小姐。com。cn/PC lady/1611/02/1612285 _ jyz。jpg’)；transform : rotateX(90度)translateZ(-200 px)}/style脚本窗口。onload=function(){ let cube=document。queryselector(' .cube’)let timer=null let x=0；y=0；函数rotate(){ cube。风格。transform=' Rotatex(' x ' deg)' ' ' Rotatey(' y ' deg)'；x=30 y=45 }函数stop(){ clearInterval(计时器)} clearInterval(计时器)；timer=setInterval(()={ rotate()；}, 1000);//监听是否在当前页，并置为已读//文档。addeventlistener('可见性更改'，函数(){//if(document。隐藏){//不处于当前页面////做某事//clearInterval(timer)//} else {//timer；//} //});var hiddenProperty='隐藏'在文档中？文档中隐藏的“:”网络工具包隐藏的？文档中的webkitHidden ' : ' mozzhidden ' mozzhidden ' : nullvar visibilitychangevent=hidden property。替换(/hidden/I，' visibility change ')；var onVisibilityChange=function(){ if(！文档[hidden property]){ timer=setInterval(()={ rotate()；}, 1000);控制台。日志(HiddenProperty)；} else { clearInterval(timer)} }文档。addevent侦听器(visibilitychangevent，onVisibilityChange)；//文档。addevent listener(' visibility change '，function () { //if(！document.hidden) { //处于当前页面//timer=setInterval(()={//rotate()；//}, 1000);//控制台。日志('活动')；//} else { //clearInterval(计时器);//console.log('隐藏');//} //});}/脚本/html