因为是学习Web前端的，对前端知识技术也十分关注。老师说要做一个3D游戏时，我第一想到的就是HTML5+CSS3技术，可以这样说：Web的未来属于HTML5。再搭配javascript，基本可以能实现你所想到的任何效果。尽管javascript是一门解释型语言，相对于编译型语言这种强类型语言要简单，但其功能是十分强大的。
说明：本文有点长，希望老师能看完^_^
成员：凌浩 0411202 2012211806 阎一豪 0411203 2012211528
作品：3Dbook
所需技术：javascript+HTML5+CSS3
需求分析：
1.需要一个声明3D空间
2.通过鼠标事件，改变book角度
3.各个角度需比例旋转
开始的大体思路和考虑到的问题：
思路：使用javascript+HTML5+CSS3,实现一个3D的翻书效果。主要通过javascript改变CSS3的transform转换（transform的属性包括：rotate() 旋转度 、skew() 倾斜度、 scale() 比例、 translate() 变动，还有X，Y之分），加上javascript动态改变多个物体（应该说“标签“或者”块“）的角度，达到一个友好的3D效果。
问题：用到了HTML5和CSS3，就不得不面对兼容性问题。不知道老师用什么浏览器，所以只好把所有常用的浏览器考虑进去（加上不同前缀，显得比较繁杂），并且此效果不支持IE8及以下版本。（注：因为它不支持HTML5和CSS3），所以请用Chrome/Firefox等常用浏览器（呼吁：珍爱生命，远离IE！！！）
性能上的考虑和解决：
1.各浏览器的兼容性（所以需要根据浏览器内核，使用固有前缀）
2.前缀不同，而后面样式相同（所以后面采用数组，靠for循环动态生成带前缀代码）
3老版本浏览器（IE8及以下不能支持最新CSS3技术）
自己动手过程：
各浏览器前缀：-webkit-(Chrome Safari) ；-moz- （Firefox）；-ms- (IE)；-o- (Opera)；
这里看看CSS3如何实现3D效果的吧（自己的一个小例子）：
声明3D空间 : transform-style:preserve-3d;
转换时间 : transition:3s all (转换时间3s);
布置盒子6面 : (第一面：transform-origin:bottom;transform:translateZ(100px)rotateX(90deg);)
（盒子的折叠：如下）
盒子demo（不是作业）:3D盒子
下面正式开始：
1.先是找素材，这里我找的是Mozilla公司的标志恐龙
2.大概想实现的效果是，通过鼠标点击，移动，改变各层角度。
3.先让book本身出场时有点角度
4.考虑到有两页。先对第一页，以Y轴为中心旋转，让两页的连接处为轴：
Z轴前移3像素（后面后页也后移3像素，看上去有层次感）
5.后一页：
Z轴后移3像素，再旋转180度（先书闭合，这样才重合）
6.恐龙和他的影子都延Y轴旋转：
1.最关键的是javascript的效果
重要步骤：
当鼠标按下移动时，根据鼠标X轴移动的距离，确定一个角度
1.最关键的是javascript的效果
javascrip最重要步骤：
当鼠标按下移动时，根据鼠标X轴移动的距离，确定一个角度
（注：这里的clamp函数是自己定义的函数，返回三个中的最大值）
再根据这个角度，分别改变书本、两页、恐龙和阴影的角度：
（这些角度/比例的选择，真的是太难测试出来~~~~(>_<)~~~~，后来通过根据数学公式中的角度计算，才算出来的。）
（注：这里用prefixes数组存放了所有前缀，使之动态添加所有的浏览器的前缀。）
关于爱情简短的句子
