同时设置多种函数
撰写时间：2026-02-23
修订时间：2026-02-23
以字符串方式设置
上面代码依序进行了平移、旋转、缩放的变换。
函数参数之间以逗号,
或空白符隔开，函数之间也以逗号,
或空白符隔开。
多种变换的先后顺序
当存在多种变换时，变换结果与变换次序相关。变换次序不一样，其结果也不一样。
取旋转与平移为例。下面先旋转30o，再进行平移。
先旋转，则局部坐标系的原点不变，局部坐标系在原点位置顺时针旋转了30o，局部坐标系朝向发生改变。然后，再沿着局部坐标系朝向向右平移50px的位移。
下面先进行平移，然后再旋转30o。
先平移，则局部坐标系的原点向右平移，导致旋转中心发生改变。然后再围绕新的旋转中心进行旋转。
在不同场合下，当我们决定到底先平移还是先旋转时，只需记住一点：平移改变局部坐标系原点；旋转围绕局部坐标系原点进行旋转。
由此，当我们需要围绕任意位置旋转时，可先将局部坐标系原点先平移至该点位置，再旋转，然后再反向平移回来。
下面代码围绕矩形的左下角逆时针旋转45o。
对于最后一步的animateTransform，需要解决的问题是，应如何平移变换后的局部坐标系的原点，才能让变换后的元素的左下角返回至变换前的元素的左下角的位置？显然，这需要经过精细的数学计算才能确定当前点与终点。但通过使用by属性值，我们只需将变换后的局部坐标系的原点平移其原先平移的偏移值的相反数值就行了，这样可无需计算当前点与终点的确切位置。