html js3d魔方,40行JavaScript代码实现的3D旋转魔方动画效果

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();

作品地址 http://js1k.com/2016-elemental/demo/2611

html js3d魔方,40行JavaScript代码实现的3D旋转魔方动画效果相关推荐

200行C++代码实现实现3D俄罗斯方块，这效果太逼真了！
最近学习openGL,在网上看了很多的资料OpenGL入门学习等很多资料,但是也只是学了点皮毛,边学边实践,于是就写了一个3D俄罗斯方块的程序. VC++基于OpenGL技术实现的3D俄罗斯方块游戏, ...
测试nginx网站代码_在40行以下代码中使用NGINX进行A / B测试
测试nginx网站代码 by Nitish Phanse 由Nitish Phanse 在40行以下代码中使用NGINX进行A / B测试 (A/B testing with NGINX in und ...
100行JavaScript代码实现JavaScript
先看效果: 100行JavaScript代码实现经典游戏俄罗斯方块新建一个html文件,复制如下代码,用浏览器打开即可: <!doctype html> <html> < ...
60行JavaScript代码写俄罗斯方块
教你看懂网上流传的60行JavaScript代码俄罗斯方块游戏早就听说网上有人仅仅用60行JavaScript代码写出了一个俄罗斯方块游戏,最近看了看,今天在这篇文章里面我把我做的分析整理一下(主要 ...
服不服？40行Python代码，实现卷积特征可视化
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文转自|深度学习这件小事卷积神经网络(CNN)变革了计算机视觉 ...
只要200行JavaScript代码，就能把特斯拉汽车带到您身边
Jerry的前一篇文章如何使用JavaScript开发AR(增强现实)移动应用 (一) 介绍了用React-Native + ViroReact开发增强现实应用的一些预备知识. 本文咱们开始进入增强 ...
40行Python代码，实现卷积特征可视化
最近在阅读 Jeremy Rifkin 的书<The End of Work>时,我读到一个有趣的关于 AI 的定义.Rifkin 写到:「今天,当科学家们谈论人工智能时,他们通常是指『一 ...
python爬虫教程：如何用40行Python代码实现天气预报和每日鸡汤推送功能
这篇文章主要介绍了通过40行Python代码实现天气预报和每日鸡汤推送功能,代码简单易懂,非常不错具有一定的参考借鉴价值 ,需要的朋友可以参考下情人节刚过去几天,但是这和我们程序员有什么关系呢,对我 ...
[原创]22行JavaScript代码实现QQ群成员提取器，绿色、环保、无病毒！
原来想给QQ群内的成员发邮件,找了一个现成的软件,没想到居然有QQ盗号病毒,很不爽.就决定自己动手,丰衣足食. 首先,我想到如果能够直接从QQ群成员列表中把所有成员拷贝出来,岂不是很方便.不过QQ明显 ...
java 魔方_2 java实现4阶魔方，通过运行代码，鼠标进行旋转，可以模拟游戏 Develop 246万源代码下载- www.pudn.com...
开发工具: Java 文件大小: 3830 KB 上传时间: 2015-11-07 下载次数: 0 详细说明:java实现4阶魔方,通过运行代码,鼠标进行旋转,可以模拟魔方游戏-java achiev ...

html js3d魔方,40行JavaScript代码实现的3D旋转魔方动画效果

html js3d魔方,40行JavaScript代码实现的3D旋转魔方动画效果相关推荐

最新文章

热门文章