平移80像素再换旋转顺序，为什么方块换了方向

操作步骤

1. 打开工具恢复示例：水平平移80、垂直0、旋转90度、横纵缩放均1，原点50% 50%。
2. 保持translate → rotate → scale的书写顺序，核对matrix(0,1,-1,0,80,0)，方块相对原位置向右移动。
3. 切换rotate → translate → scale，核对matrix(0,1,-1,0,0,80)，方块改向下移动。虚线标出变换前的位置。
4. 把角度改为0比较，再恢复90度。复制CSS应用到已有元素；暂时把缩放改0，确认错误和旧导出清除。

跟着示例试一次

在从左到右的排版中，90度为顺时针。translate(80px,0px) rotate(90deg)对点坐标可理解为先旋转再平移；rotate(90deg) translate(80px,0px)则先把点向右移，再旋转，所以平移方向变为向下。

.tile {
  transform: rotate(90deg) translate(80px, 0px) scale(1, 1);
  transform-origin: 50% 50%;
}

怎样确认结果正确

两组矩阵a、b、c、d均为0、1、−1、0，区别在e、f：80、0与0、80。零角度时两种顺序都回到e=80、f=0。预览使用浏览器原生CSS，六个矩阵数值保留最多六位小数。

常见问题与边界

函数书写顺序不是对点坐标的先后应用顺序。transform-origin单独作用，不包含在这里显示的矩阵e、f中。预览只做二维平移、旋转、正数缩放；无3D、透视、斜切或动画。变换不改变文档流尺寸，大幅变换可能被预览边界裁掉。参数只在当前页面计算，无上传或自动保存。