在本篇文章里小编给大家整理了关于Java脚本语言实现的三维(三维的缩写)旋转魔方动画效果实例代码，有兴趣的朋友们测试下。
JS1K是Java脚本语言编程竞赛——参加竞赛的规则很简单，脚本必须小于1K，竞赛网站开始也只是为了娱乐，却意外地收到了很多优秀的作品。
这是2016年JS1k上传的作品，用几十行代码实现的一个三维(三维的缩写)旋转魔方：
代码如下：
函数z(t，e) {
回t？e？t . appendchild(e):' width:' t ' px；高度：" t "
px；位置：绝对；document.createElement('div ')
}
函数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)'，
请求动画帧(w)
}
var a='转换，
p='背景色：',
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 px ' 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 ':平移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)' border-radius:9px；边框：4px纯色
#000;不透明度：0.9;a ':' r ' X(' 4n？90 * n : 0)
deg)' r ' Y((4n？0 : 4==n？-90:90)' deg)平移z(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()；
知识点扩展
射流研究…如何实现旋转的魔方，浏览器从其他标签页回来依然匀速旋转？
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '
meta http-equiv=' X-UA-Compatible ' content=' ie=edge '
标题文档/标题
/头
身体
div class='cube' onclick='stop()'
div class='front'front/div
div class='back '后退/div
div class='left '左/div
div class='右'右/div
div class='top'top/div
div class='bottom '底部/div
/div
/body
风格。立方体{
宽度：400像素
高度：400像素
转场：全3s；
边距：300像素自动；
/* 作用于所有三维(三维的缩写)转换的子元素设置给父级*/
/*视角：1000像素*/
/*转换：rotateX(30度)罗泰(45度);*/
/* 平面到立方默认值：平面扁平*/
变换样式：保留-3d；
位置：相对；
}
/* div:悬停{
transform:rotateY(90度)translate z(-200像素)；
不透明度：0.5;
} */。前面，回来了，左边，对，顶，底部{
宽度：100%;
身高：100%;
文本对齐：居中；
行高：400像素；
位置：绝对；
不透明度：0.9;
左：0;
top:0；
}。正面{
背景色：浅紫色；
背景-图片：URL(' http://img 1。gt img。com/TJ/pics/hv1/117/208/2153/140051982。jpg’)；
transform:平移z(200px)；
}。后退{
背景色：黄色；
transform:平移z(-200 px)；
背景图像：URL(' https://ss 1。BD静态。com/70 cfuxsh _ q 1 ynxgkpowk 1 HF 6 hy/it/u=841408372，3004217725fm=11gp=0。jpg’)；
}。左侧{
背景色：粉色；
背景图像：URL(' https://ss 0。BD静态。com/70 cfu HSH _ q 1 ynxgkpowk 1 HF 6 hy/it/u=2388632836，3966607624fm=26gp=0。jpg’)；
变换：旋转(90度)平移(-200像素)
}。右{
背景色：黄绿色；
背景图像：URL(' https://ss 0。BD静态。com/70 cfu HSH _ q 1 ynxgkpowk 1 HF 6 hy/it/u=192610795，467565159fm=26gp=0。jpg’)；
变换：旋转(90度)平移(200像素)
}。顶部{
背景色：天蓝色；
背景图像：URL(' https://ss 0。BD静态。com/70 cfu HSH _ q 1 ynxgkpowk 1 HF 6 hy/it/u=2936477803，4198185787fm=15gp=0。jpg’)；
变换：rotateX(90度)翻译z(200像素)
}。底部{
背景色：橙色；
背景-图片：URL(' http://img 0。电脑小姐。com。cn/PC lady/1611/02/1612285 _ jyz。jpg’)；
转换：rotateX(90度)翻译z(-200像素)
}
/风格
脚本
window.onload=function () {
let cube=document.querySelector(' .立方体)
让定时器=空
设x=0；y=0；
函数旋转(){
立方体。风格。transform=' rotateX(' x ' deg)' ' ' ' rotateY(' y ' deg)'；
x=30
y=45
}
函数stop() {
清除时间间隔（定时器)
}
间隙(定时器);
timer=setInterval(()={
rotate()；
}, 1000);
//监听是否在当前页，并置为已读
//文档。addevent侦听器('可见性更改'，函数(){
//if (document.hidden) { //不处于当前页面
////做点什么
//clearInterval(定时器)
//}其他{
//定时器；
//}
//});
var hiddenProperty='hidden '在文档中？"隐藏":
文档中的“webkitHidden”？webkitHidden ':
文档中的《mozHidden》？《mozHidden》:
空
var visibilityChangeEvent=hidden属性。replace(/hidden/I，“可见性更改”)；
var可视性变化=function(){
如果(!文档[hiddenProperty]) {
timer=setInterval(()={
rotate()；
}, 1000);
控制台。日志(隐藏属性)；
}否则{
清除时间间隔（定时器)
}
}
文档。addevent侦听器(visibilityChangeEvent，onVisibilityChange)；
//文档。addevent侦听器('可见性更改'，函数(){
//如果(!document.hidden) { //处于当前页面
//timer=setInterval(()={
//rotate()；
//}, 1000);
//控制台。日志(“活动”)；
//}其他{
//clearInterval(定时器);
//控制台。日志(“隐藏”)；
//}
//});
}
/脚本
/html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。