最近在学习HTML5 和 CSS3，印象最深的是 CSS3 的动画功能，不仅有浏览器原生支持，执行效率高，而且免去在 js 中自己管理 timer。

本来想写一个图片轮播器练练手，结果在网上发现一个国人写的开源的图片轮播器。不仅效果很酷，而且是“女神级” 的。什么？你问是不是妹子写的？这个我不知道，我说的是这个 Demo 中的图片都是女神呀，性感火辣，丰满妩媚……咳咳，回正题。

在参加飞跃马拉松的时候，小组的项目构思是基于移动社交网络做一个记录用户旅游轨迹和照片的 APP 应用。

即当用户在旅游过程中，手机会不间断的上报 GPS 坐标到服务器，服务器会保存所有坐标到数据库，然后用户打开自己的旅游记录后，我们会在手机上创建一个全屏的地图，通过服务器 CGI 获取所有 GPS 的坐标点，然后通过这些坐标点绘制出一条线。

上周 Oscar 赴新加坡南洋理工大学（Nanyang Technological University, Singapore）参加 Mozilla 主办的 HTML5 集训及研讨会。活动主要是针对希望了解 HTML5 技术的在校学生，分享 HTML5 的当前状况、主要技术点以及一些实际应用，以帮助他们了解 HTML5 的强大能力和快速入门。

原文：http://blog.artillery.com/2012/05/realtime-multiplayer-3d-gaming-html5.html

这篇文章国内有些机器译的版本，但实在太难阅读，这里试译了下。
由于译者水平有限，可能会有不少错漏之处，一些不明确是否译准的地方附了原文。
此文涉及挺多框架/库，在翻译过程中 ip 收获还是挺多的，建议大家在阅读时可以同时去了解下文中所提到的相关技术。
【提示：此文不是"跟我学做 HTML5 游戏"之类的教程文章】

我觉得 CCS3 的 transform 中的学问很深，可以出不少面试题了，之前的文章谈到过 perspective 属性的位置问题，我们今天看看 rotate 的顺序，首先看看下面两个 CSS3 的 keyframe 动画：

两个动画的起始状态和结束状态都是是一摸一样的（其实就是原始位置），不同的只不过是 rotate 和 rotateX 的顺序。但是动画效果却有惊人的差别。

一开始先看个小小 demo，切换 tab 对比下！

不得不说，浏览器的多 tab（and 多窗口）设计确实是满足了用户同时浏览很多个网页的需求，但是，网上有成千上万的页面，这些页面性能又参差不齐，对于某些性能很差的页面，用户停留在这个页面倒还好，但是当用户切换了到了其他 tab 页时，有可能会出现由于性能差的页面卡死导致整个浏览器卡死甚至机器卡死，其他页面好冤，浏览器好冤，机子好冤 [汗]。

HTML 5 以前的标准由于考虑到浏览器安全问题并不允许直接跨域通信，于是为了达到跨域通信的目的各种蛋疼的解决办法出现了，常用的有：jsonp、使用代理文件、地址栏 hash 等等，这些办法的出现在达到解决跨域问题的同时，也增加了前端页面的性能开销和维护成本。HTML5 新的标准中，增加了” Cross-Origin Resource Sharing” 特性，这个特性的出现使得跨域通信只需通过配置 http 协议头来即可解决。

以下两行语句有什么区别？

如果大家不清楚，请听我娓娓道来。

CCS3 中的 Transform 是设置界面样式和动画的一大利器。而且在 Chrome 和 FF 中还支持 3D 变换。IE9 不支持，IE10 支持。

 添加 CSS

通常情况 CSS 不论是内嵌还是外联，都是预先定义好的。其实利用 JavaScript，我们也可以动态在页面中插入或删除 CSS。

比较常见的场景是：CSS 动画。由于我们在设计网页时不能预知动画的具体细节，所以需要在运行时进行定制。比如，我们想让一个元素从右侧飞出屏幕，如果用 keyframe 动画实现，我们必须知道屏幕的宽度，这个信息只有在运行才知道。
例如下面的 1026px，是运行时浏览器窗口的宽度。