搞不清楚的Transform
先旋转后平移，先平移后旋转，傻傻分不清楚。CSS 中 transform 的魔法效果。
在网页动效与布局领域，transform属性是创造视觉魔法的重要工具。但许多开发者在使用时会发现一个反直觉现象：相同的变换函数，不同的书写顺序竟会产生截然不同的视觉效果。这背后的奥秘源于计算机图形学中的坐标系传导机制。
一、核心结论
transform属性中变换顺序不同会导致最终效果不同，因为每个变换操作都会改变元素的坐标系，后续变换基于新的坐标系进行。
二、两种场景对比
场景1：先平移后旋转
transform: translate(50px, 0) rotate(45deg);
执行步骤：
- 在原始坐标系中向右平移100px
- 基于平移后的新坐标系旋转45度
场景2：先旋转后平移
transform: rotate(45deg) translate(50px, 0);
执行步骤：
- 在原始坐标系中旋转45度
- 基于旋转后的新坐标系向右平移50px（实际方向会改变）
效果预览
三、可视化差异
假设初始位置为坐标系原点（0,0）：
- 先平移后旋转：元素最终会出现在原坐标系（50,0）位置，但方向旋转了45度
- 先旋转后平移：元素会沿旋转后的坐标系X轴移动，实际会向东北方向移动
四、数学原理
每个变换对应一个变换矩阵：
最终矩阵 = T1 * T2 * ... * Tn
矩阵乘法不满足交换律，因此：
rotate() * translate() ≠ translate() * rotate()
五、实际应用场景
- 绕固定点旋转（先平移后旋转）
/* 让元素围绕中心点旋转 */
transform: translate(-50%, -50%) rotate(45deg) translate(50%, 50%);
- 方向性移动（先旋转后平移）
/* 让箭头沿45度方向移动 */
.arrow {
transform: rotate(45deg) translate(100px, 0);
}
六、调试技巧
- 使用Chrome DevTools逐项调试变换属性
- 通过
transform-origin改变变换基准点 - 使用3D视图查看坐标系变化（
transform-style: preserve-3d）
七、常见误区
- 误认为变换顺序不影响最终效果
- 忽略
transform-origin的默认值（元素中心点） - 混合使用不同单位（deg/rad）导致计算错误
八、记忆口诀
- "变换顺序从右到左，坐标系会层层传导；
- 旋转之后方向变，平移方向要重算"
