CSS3动画背后的数学秘密：transform: rotate()与旋转矩阵的等价实现

CSS3动画背后的数学秘密：transform: rotate()与旋转矩阵的等价实现

当我们在CSS中写下transform: rotate(30deg)时，浏览器究竟在底层做了哪些数学运算？这个看似简单的旋转指令背后，隐藏着一套完整的线性代数变换体系。本文将从前端工程师的实用视角出发，揭示CSS旋转与矩阵运算的等价关系，并展示如何手动计算复合动画的变换矩阵。

1. 旋转指令的底层实现原理

现代浏览器渲染引擎在处理CSS变换时，最终都会将其转换为矩阵运算。以二维旋转为例，当元素设置rotate(θ)时，浏览器会自动生成一个2x2的旋转矩阵：

R = \begin{bmatrix}
\cosθ & -\sinθ \\
\sinθ & \cosθ
\end{bmatrix}

这个矩阵与元素的顶点坐标进行矩阵乘法运算，从而得到旋转后的新坐标。我们可以通过以下CSS和JavaScript代码验证这一过程：

.box {
  width: 100px;
  height: 100px;
  transform: rotate(30deg);
}

const box = document.querySelector('.box');
const matrix = getComputedStyle(box).transform;
console.log(matrix); // 输出矩阵函数，如matrix(0.866, 0.5, -0.5, 0.866, 0, 0)

控制台输出的matrix函数参数正好对应旋转矩阵的各项值（cos30°≈0.866，sin30°=0.5）。这种等价关系揭示了CSS变换的数学本质。

2. 复合动画的矩阵乘法规则

实际开发中，我们经常需要组合多个变换属性。例如同