matrix

---

css3几种常见的翻页特效

css3 matrix 2D矩阵和canvas transform 2D矩阵

CSS3 matrix3d矩阵变换和动画变换

矩阵与矩阵变换

css3 transform-origin默认是元素的中点，css3旋转就是绕着这个点转动，
而canvas的transform的rotate方法是默认绕着canvas的原点（即左上角）旋转。

css3中对应4个方法分别是scale()、translate()、rotate()和skew()
canvas的3个方法分别是scale()、translate()、rotate()，canvas对象没有skew()方法

matrix有六个参数matrix(a, b, c, d, x, y)
默认值是matrix(1, 0, 0, 1, 0, 0)，
六个参数分别控制不同的变换
a 水平缩放
b 水平拉伸
c 垂直拉伸
d 垂直缩放
x 水平位移
y 垂直位移

旋转β,变换后的坐标：
c = xcos(β) - ysin(β)
d = ycos(β) + xsin(β)

斜切或拉伸，上图沿X轴斜向拉伸

cotx：余切函数，cotx=1/(tanx)=(cosx)/(sinx)
secx：正割函数，secx=1/(cosx)
cscx：余割函数，cscx=1/(sinx)

sin（－α）＝－sinα      cos（－α）＝cosα 
tan（－α）＝－tanα      cot（－α）＝－cotα

Visual proof of the addition formulas
三角函数证明
sin(α+β)=sin(α)cos(β)+cos(α)sin(β)
cos(α+β)=cos(α)cos(β)–sin(α)sin(β)