transform 会创建新的局部坐标系，其原点默认在 transform-origin（默认50% 50%），旋转、缩放、倾斜会改变坐标轴方向和单位长度，translate 仅平移原点，且复合顺序影响最终坐标系方向。
transform 会创建新的局部坐标系
当元素设置了 transform（如 translate(10px, 20px)、rotate(45deg)），浏览器会为它建立一个独立的、变换后的局部坐标系。此时，后续所有基于该元素的定位（比如子元素的 position: absolute）都以这个新坐标系为参考，而不是原始文档流坐标系。
常见错误现象：父元素加了 transform: scale(0.8)，子元素用 top: 0; left: 0 定位后“偏移了”，其实是子元素的 0,0 点被缩放后映射到了父容器左上角内侧更小的位置——因为它的 top/left 是相对于缩放后的父容器边界计算的。
- 这个新坐标系原点默认在元素自身
transform-origin处（默认是50% 50%） - 旋转、缩放、倾斜都会改变坐标轴方向和单位长度，
translate只平移原点 -
transform的复合顺序影响最终坐标系方向（如rotate在前 vstranslate在前，子元素的“上”可能不再是物理上的上）
position 和 transform 共同作用时，层叠与渲染顺序易混淆
position: relative/absolute/fixed 影响元素在 CSS 层叠上下文（stacking context）中的层级位置；而 transform（只要值不为 none）会自动触发新的层叠上下文。两者叠加时，容易误判谁盖住谁。
例如：一个 position: relative 的容器设置了 transform: translateZ(0)，它内部的 z-index 就只在它自己的层叠上下文中生效，无法和外部同级元素直接比大小。
立即学习“前端免费学习笔记（深入）”；
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 若需跨层级控制遮挡关系，优先用
z-index配合position，避免无意义地加transform: translateZ(0)强制提升层级 - 动画中频繁使用
transform触发硬件加速时，要意识到它悄悄新建了层叠上下文，可能让预期的z-index失效 - 调试技巧：在 Chrome DevTools 的 Layers 面板里可直观看到哪些元素因
transform被单独分层
绝对定位子元素受父级 transform 的“视觉偏移”干扰
这是最常踩的坑：父元素有 transform，子元素设 position: absolute; top: 0; left: 0，结果没贴到父元素左上角。
div.parent {
transform: rotate(10deg) translateX(20px);
}
div.child {
position: absolute;
top: 0;
left: 0;
/* 实际渲染位置 ≠ 父元素旋转前的左上角 */
}原因在于：子元素的 top/left 是相对于父元素变换后的新边界盒（bounding box）计算的，而这个盒子已被旋转、缩放扭曲。它的“0,0”点仍是父元素 transform-origin 所在位置，但整个坐标系已倾斜。
- 解决方法不是去掉
transform，而是改用transform控制子元素位置（保持坐标系一致） - 或者把需要精确定位的子元素提到父级 DOM 层级，用 JS 动态计算 offset 并设置
left/top - 注意：CSS
contain: layout paint不能阻止这种坐标系继承，它只限制绘制范围
transform-origin 与 position 定位原点不一致
position: absolute 的 top/left 始终以包含块（containing block）的左上角为起点；而 transform-origin 默认是元素自身的中心（50% 50%），且可任意设置。两者原点不同，混用时极易错位。
例如：一个按钮有 position: relative 和 transform: rotate(90deg)，你希望下拉菜单从按钮右下角弹出——如果只靠 top: 100%; left: 100%，菜单会从旋转后按钮的“右下”（可能是物理左上）弹出。
- 统一思路：对需要联动定位的父子元素，尽量用同一套坐标系——要么全用
transform位移，要么父元素不用transform，仅用margin或top/left - 调试时可用
outline: 1px solid red叠加transform-box: fill-box查看实际变换原点 -
transform-box: border-box（默认）和view-box会影响transform-origin的参照基准，SVG 中尤其关键
实际项目中最容易被忽略的是：你以为在移动元素，其实是在旋转坐标系；你以为在设置位置，其实是在扭曲参照系。动一个，另一个就悄悄变了。
