CSS 2D 变换：坐标系、原点、顺序与布局边界

transform 可以在绘制阶段对元素坐标系做平移、旋转、缩放和倾斜。它改变元素的视觉呈现，不会像 Grid、Flexbox 或常规定位那样重新安排普通流中的兄弟元素；变换后画面可能与其他元素重叠，页面也可能出现溢出。

常用函数与参照点

.badge {
  transform: translate(0.5rem, -0.25rem) rotate(-4deg);
  transform-origin: center;
}

.preview:hover {
  transform: translateY(-0.25rem) scale(1.02);
}

translate() 移动元素；rotate() 按角度旋转；scale() 缩放宽高；skew() 沿轴倾斜。平移百分比相对被变换元素的边界框，和父容器宽度不是一回事。transform-origin 默认在盒子中心，改变它会改变旋转/缩放围绕的支点。

同一个 transform 列表按书写顺序组合：每个函数会建立后续变换使用的坐标空间。平移后旋转与先旋转后平移通常产生不同结果。不要凭直觉把组合压成矩阵；先写成清晰的函数列表，再在 DevTools 中观察。

二维矩阵 matrix(a, b, c, d, e, f) 将点变为 x' = a·x + c·y + e、y' = b·x + d·y + f。这可用于理解或读取计算结果，但手工维护矩阵会隐藏旋转、倾斜和平移意图；除非正在对接图形/动画算法，一般保留高层函数更合适。

现代 CSS 还提供独立的 translate、rotate、scale 属性，它们按 translate、rotate、scale、transform 的顺序组合。混用时要检查最终顺序；有动画时也要验证关键帧合成，不要假设声明出现顺序就是视觉顺序。

布局与层叠副作用

非 none 的 transform 会创建新的 stacking context，并让该元素成为其后代绝对定位与固定定位元素的 containing block。给祖先加 transform 后，position: fixed 的弹窗可能不再固定于视口，z-index 也不能越过祖先 stacking context 与页面其他层比较。

变换本身不改变文档流占位。若按钮放大后与邻居重叠，需调整实际布局或交互热区，而不是把它当成“空间自动扩张”。变换也可能扩大滚动区域；可检查祖先裁切、焦点可见性和触摸命中区域。

动画与无障碍

轻量位移/缩放常用于反馈，但不应成为状态的唯一表达。对频繁动画优先测量目标设备上的合成和帧耗时；大面积模糊、阴影或过多图层依然可能昂贵。悬停反馈也需为键盘焦点、触摸和减少动态效果偏好提供等价体验。

.tile {
  transition: transform 160ms ease;
}

.tile:hover,
.tile:focus-visible {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .tile {
    transition: none;
  }
}

验证鼠标 hover、键盘 focus、触摸设备、窄屏、缩放、页面滚动和 reduced-motion。若被变换元素包含菜单或固定控件，单独测试定位与层叠；必要时把浮层挂到独立根节点，而非继续提高 z-index。

参考：MDN transform、MDN transform-origin、MDN stacking context、MDN prefers-reduced-motion。