OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 JS开源   关键字 JavaScript   发布 ourjs  1509929950688
注意 转载须保留原文链接,译文链接,作者译者等信息。  
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

社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. WordPress、百度宣布停止使用React(Native)开源项目,Facebook开源专利许可潜在的法律风险
  2. 阿里涉嫌抄袭创业公司产品:在今天这个故事里,阿里巴巴就是四十大盗
  3. 从 Node 到 Go:一个粗略的比较—GO平均性能比JavaScript快十几倍
  4. 迫于社区压力:React(Native)16将更换成MIT开源协议
  5. Node.JS中如何快速扫描端口并发现局域网内的Web服务器地址(80)
  6. Node也许不是构建大型服务的最佳选择—Node之父Ryan Dahl访谈录
  7. GitHub2017年度开发者报告 JavaScript依然遥遥领先Python突飞猛进
  8. 垄断"开源硬件"树莓派芯片的供应商博通要收购高通了
  9. 招聘前端工程师
  10. 【干货】扫描识别控件Dynamic Web TWAIN在线示例汇总
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS开源
  1. JavaScript条形码生成和扫码识别(Barcode scan)开源库
  2. Github Pages疑似被封: 再也不能用Pages搭建个人博客了
  3. Google Cloud宣布加入NodeJS基金会
  4. 【数据可视化】基础知识贴:10大关键术语
  5. 使用React提高Angular的渲染性能(译)
  6. NodeJS将有望使用微软的ChakraCore JavaScript引擎驱动
  7. 轻量级的可调视图和面板分栏Layout布局工具[开源]
  8. HTML5相关格式转换提供商对比—选择困难户的专属福利来啦!
  9. 从React到Domcom: 一个提供DOM部件的web框架
  10. Stop-Server:用手机关闭你的电脑

 关键字 - JavaScript
  1. 如何用CSS将select/option文本居中或居右对齐
  2. 40行JavaScript代码实现的3D旋转魔方动画效果
  3. 使用Javascript将相对路径地址转换为绝对路径
  4. 给checkbox选择框设置不选中时的值
  5. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  6. JavaScript中怪异的地方
  7. 在JavaScript中创建命名空间的几种写法
  8. JavaScript中的继承,构造函数以及new关键字的作用
  9. 纽约时报使用Html5 WebRTC记录访问者IP地址
  10. 正则中test、exec、match的简单区别,以及括号的用法

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号