示例

https://c.runoob.com/codedemo/3391
https://www.runoob.com/try/try.php?filename=trycss3_transform-origin_inuse

transform的matrix表示

transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transform-origin属性允许您更改转换元素的位置。 2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
transfrom matrix：
matrix(n,n,n,n,n,n)    定义 2D 转换，使用六个值的矩阵。 
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。

transform与线性变化-translate

transform与线性变化-rotate

transform与线性变化

transform与线性变化-升维

transform与线性变化-升维例子

css中matrix

参考
栅格化时为什么要引入齐次坐标: https://www.jianshu.com/p/63ca53530a24
线性变换：
https://pan.baidu.com/share/init?surl=PHvga2hM5Gj3BhzeNcQNCQ，提取码:6zen
图形学位移，旋转，缩放矩阵变换：
https://www.jianshu.com/p/ac1b34420be7

threejs基础概念

webgl处理流程

threejs中的transform操作

threejs中的transform操作
Three.js中矩阵和向量的使用教程(附例子)：https://www.jianshu.com/p/7259aef11d4e
坐标系空间变换
坐标变换过程：物体从三维坐标映射到2D屏幕上，要经过一系列的坐标系变换，这些坐标系如下：
model => world => image => perspective => screen
（局部坐标=>世界坐标=>观察坐标=>透视坐标=>屏幕坐标）
具体参见https://www.jianshu.com/p/09095090c07f
https://blog.csdn.net/jgwuhust/article/details/51485702
model(相对/本地坐标系)
物体本身（local）的坐标系，是相对坐标。
比如一个3D人物模型，头部某个点的坐标为（0，0，20），这是相对该模型的中心点（0，0，0）说的。当模型向前移动了5个单位，其中心点依旧是（0，0，0），头部那个点依旧是（0，0，20）。
world(世界坐标系)
世界坐标系，即物体放在世界里的坐标。把各元素绘制屏幕的时候，这些元素的本地坐标需要映射成世界坐标系坐标。three.js里面的世界坐标系是右手坐标系，一个应用程序可能包含成千上百个单独对象，我们必须把他们放到一个公共场景里，相机默认在世界坐标系的原点。
还是上面的例子，他沿Z轴移动了5个单位后，中心点在世界坐标里变成了（0，0，5），头部那个点变成了（0，0，25）。
物体的位移，缩放，旋转会改变它的世界坐标，不会改变它的model坐标。
image(相机坐标系)
相机也是世界里的一个物体，相机坐标就是以相机位置为坐标原点，相机的朝向为Z轴方向的坐标系。因为我们在电脑里看到的物体其实都是“相机”帮助我们看的，“相机”就是我们的眼睛，所以要以相机为标准进行坐标转换。
在model，world，image坐标系下，X,Y,Z的范围都是无穷大，只是坐标系的基准不一样而已。
perspective (NDC, Normalized Device Coords)(透视坐标系)
这一步是将三维坐标向二维平面进行映射，经过透视变换之后，（x, y）的范围在[-1, 1]，z的范围在[0, 1]。
screen(屏幕坐标系)
因为屏幕是有分辨率的，比如1920×1080，所以还要再进行一次变换。
该坐标系的原点在屏幕左上角，x轴朝右，y轴朝下。x的范围在[0, xres-1]，y的范围在[0, yres-1]，即x是[0, 1920)，y是[0, 1080)。
z值是[0, MAXINT]，z=0就是屏幕那个平面，z=MAXINT就是无穷远。
参考
基于 Threejs 的 web 3D 开发入门: https://www.jianshu.com/p/7ccf43f912bc
webgl基本概念：
https://www.jianshu.com/p/1d3134de34c4
OpenGL ES顶点着色器和片元着色器：
https://www.jianshu.com/p/16271a827095
Threejs零基础入门：
http://www.yanhuangxueyuan.com/Three.js/