线性变换

线性变换

2D旋转

aM = b

2D旋转矩阵

\[\left[ \begin{matrix} x \\ y \end{matrix} \right] \times \left[ \begin{matrix} cos\theta & sin\theta \\ -sin\theta & cos\theta \end{matrix} \right] \]

角度与弧度互转

弧度：Math.PI / 180 * deg
角度：180 / Math.PI * radian

 div {
  width: 100px;
  height: 100px;
  background: red;
  transform:matrix(0.7853981633974483,0.7853981633974483,-0.7853981633974483,0.7853981633974483,0,0);
  transform: rotate(45deg);
 }

3D旋转

左手坐标系和左手法则

右手坐标系和右手法则

绕x轴旋转

\[\left[ \begin{matrix} x \\ y \\ z \end{matrix} \right] \times \left[ \begin{matrix} 1 & 0 & 0 \\ 0 & cos\theta & sin\theta \\ 0 & -sin\theta & cos\theta \end{matrix} \right] \]

绕y轴旋转

\[\left[ \begin{matrix} x \\ y \\ z \end{matrix} \right] \times \left[ \begin{matrix} cos\theta & 0 & -sin\theta \\ 0 & 1 & 0 \\ sin\theta & 0 & cos\theta \end{matrix} \right] \]

div {
  width: 100px;
  height: 100px;
  background: red;
  transform: matrix3d(              
                0.7853981633974483,0,-0.7853981633974483,0,
                0,1,0,0,
                0.7853981633974483,0,0.7853981633974483,0,
                0,0,0,1
            );
  }

绕z轴旋转

\[\left[ \begin{matrix} x \\ y \\ z \end{matrix} \right] \times \left[ \begin{matrix} cos\theta & sin\theta & 0\\ -sin\theta & cos\theta & 0 \\ 0 & 0 & 1 \end{matrix} \right] \]