css3-变换-概要

1. css3中的2d变换技术( 不影响元素的定位, 定位点的左上角为(0,0) ). 

　　1.1 transform: translate(x, y); 定义 2D 平移变换(px)，沿着 X 和 Y 轴. 

　　1.2 transform: rotate(deg); 顺时针旋转的角度. 

　　1.3 transform: scale(rateX, rateY);  定义 2D 伸缩变换. 

　　1.4 transform: skew(x-angle,y-angle); 定义 2D 倾斜转换，沿着 X 和 Y 轴. 

　　1.5 transform: skewX(angle); 定义 2D 倾斜转换，沿着 X 轴. 

　　1.6 transform: skewY(angle); 定义 2D 倾斜转换，沿着 Y 轴. 

　　1.7 旋转和旋转中心点

　　　　tranlate将原点(0,0)移动到什么地方，就在什么地方旋转，先tranlate再rotate; 

　　　　如果要基于图片中心进行旋转，需要先将图片中心点(width/2, height/2)移动到(0, 0)点进行旋转，再进行三角函数计算进行补偿"移回"; 

　　　　如果先rotate再transform 那就不太好看了  

　　1.8 伸缩和伸缩中心点

　　　　tranlate将原点(0,0)移动到什么地方，就在什么地方旋转，先tranlate再scale; 

1.10 matrix(n, n, n, n, n, n): 

       

　　translate, rotate, scale, skew 都是 matrix的各种特殊参数变化带来的

　　

2. canvas的2d变换技术:

　　　　不得不提到一件事情: 之前的项目中，图片在iphone上呈现一些问题，drawImage时，进行等比伸缩，会导致图片变形。

　　　　解决方法有两种：第1种是图片上传，后重新读取，让后台对图片的像素信息进行处理；第2种是对图片进行drawImage的截取处理，不画全图。

　　　　

3. css3中的3d变换技术: 

　　　　使用空间几何的知识，对将要进行3d运动的平面物体进行运动轨迹分析，注意角速度与线速度之间的变换，极坐标方程的变换。（对于我现在进行的傅立叶级数、傅立叶变换、小波变换、z变换，空间几何有一种母亲的感觉啊）

4. css3中的perserve-3d基于观察者的模拟: 

　　　　加入了观察者，观察者的位置和距离，实际上3的变换技术不懂的话，这个也能用起来，只是这就是一种无法改变的定制模式了。

5. 基于多个canvas的组合3d场景

　　　　3d地图全景与全景电影应该就是试用此技术完成的。

6. three.js与webgl-3d的变换技术

　　　　引入GPU的计算力，可以直接在页面上画网格曲面，但是浏览器性能有限，这个webgl的体验效果好不好，得另说，例如像这个地球模型。

           就我所知道的，观察者是必须的，加入了图形皮肤和光源。