立体页面切换

目标，写一个类似http://www.jq22.com/js/a7.html效果的页面

8.18号的cancavs作画伴随深入学习了canvas以及线性，圆形颜色渐变，类似背景的原理有着落了，该网页背景不是用canvas画的，直接css设置，之后还要讲...

今天学习了css3的3d设置，参考该篇文章， http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/，不得不说，该篇博主实在很猥琐，嘛，为了使画面有立体感，我把从上文学到的以及从其他文章学到的知识应用于简单的页面切换，最终目标，创造自己的一片“星空”。

1、简单说下xyz

CSS3中的transform有多种变换，其中有3d和2d的，3d的rotate都是绕轴旋转，记住，绕轴，不是绕点旋转，具体怎么样上篇文章介绍得很详细了，希望看了上篇文章之后再来看一下这章的小tips

2、舞台，容器，内容的搭建

真的是纸上得来终觉浅，绝知此事要躬行。

1）之前看的时候那博主讲舞台，容器，内容的搭建一晃而过，导致我第一次搭建的时候直接把内容放在了舞台上，没有容器，最后会发生一件很坑爹的事情，当你想旋转整个立体块的时候只能旋转舞台，然后看的地方是舞台，注意舞台这家伙是相当扁的，旋转到一定角度之后，你已经看不清你放上去的图了。

所以，舞台很重要，不能动，想象一下你坐在影剧院里看表演，如果台上的演员旋转，舞台也旋转起来，会是一件非常糟糕的事情。

2）本来以为容器只是装图片的东西不要也罢，殊不知容器将是整个立体物件动起来的核心，是源动力。必须要注意的一点是，因为把容器设置成了源动力，则需要把容器放置在创建的立体物件的中心位置，不然等容器旋转起来，画面实在太美好。如果你发现你的立体物件从左边转到右边然后从右边转到左边，或者从上边转到下边然后再转回来，肯定是旋转的核心不在物件的中心位置=。=

3、perspective

当我想找到最佳的perspective时，无论输入多少px总是不精准的

引用：http://m.blog.csdn.net/article/details?id=39003061

MDN官方文档说明：

perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。

三维元素在观察者后面的部分不会绘制出来，即z轴坐标值大于perspective属性值的部分。

默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。

属性值为0或负值或none（none是默认值）时，没有透视效果。

只提一点，z=0平面就是屏幕。

4、化腐朽为神奇的3d转变

transform-style:preserve-3d;

没有上面那句话，就没有立体的东西，这句话赋予给容器就好了，唔，可以思考一下，舞台需要立体吗？容器立体可以旋转，舞台立体，估计可以全方位观察立体的容器。
只需要记住，上面那句css是化2d为3d的东西就好啦。

5、perspective-origin

透视的角度

画一个立体的六面体，简单的画法是前面一个四边形，后面一个四边形，然后连线，perspective-origin就是后面那个四边形的中点相对于前面那个四边形的中点的位置。