translateX()和translateY()的百分比基于元素自身宽高而非父容器；rotate()必须用deg单位且默认绕中心旋转；scale会缩放坐标系影响后续transform；复合变换从右往左执行并创建新层叠上下文。
translateX() 和 translateY() 的单位和参照系容易搞错
直接写 translateX(50%) 看似简单，但结果常让人困惑：元素没动、动得不对、或在不同设备上偏移不一致。核心原因是百分比值永远基于**元素自身宽高**计算，不是父容器——translateX(50%) 是向右移动自己宽度的一半，translateY(50%) 是向下移动自己高度的一半。
常见错误现象：
-
span或em这类纯行内元素加了translateX没反应？必须先设display: inline-block或block，否则 transform 不生效 - 混用单位，比如
translateX(10px, 20%)是非法语法 ——translateX()只接受单个值，不能带逗号 - 响应式中用百分比，但元素宽高未固定（如内容动态撑开），会导致偏移量跳变
实操建议：
- 固定距离偏移优先用
px，最直观可控 - 居中类场景（如弹窗居中）用
translate(-50%, -50%)是可靠方案，但前提是元素已设置明确的width和height或至少有稳定盒模型 - 避免在 flex 或 grid 子项上盲目套
translate，可能和布局引擎冲突，先确认是否真需要脱离文档流位移
rotate() 必须带 deg 单位，且旋转中心默认在中心点
rotate(45) 或 rotate(45rad) 都不会生效，浏览器只认 deg（除非你显式启用 rad 单位并配对使用，但几乎没人这么干）。顺时针为正，逆时针为负，这点和数学坐标系相反。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的是旋转原点：rotate() 默认绕元素**中心点**转。想绕左上角转？得加 transform-origin: top left，而且这条声明必须写在 rotate() 同一元素的样式块里，并且 CSS 解析顺序会影响结果 —— transform-origin 要放在 transform 声明之前才稳定。
实操建议：
- 动画中连续旋转如
rotate(720deg)和rotate(0deg)视觉无差别，浏览器可能跳过中间帧；若需完整两圈动画，用@keyframes显式定义 0→360→720 - 复合变换时顺序关键：
transform: rotate(30deg) scaleX(1.2)和transform: scaleX(1.2) rotate(30deg)效果不同 —— CSS 从右往左执行函数 - 不要依赖
rotateZ()替代rotate()，两者等价，但前者易误导人以为是 3D，实际仍是 2D
scaleX() 和 scaleY() 别误用 scaleZ()，缩放会改变坐标系
想只拉宽不压高？用 scaleX(1.5)；想只压扁高度？用 scaleY(0.6)。这两个函数互不影响，也最常用。但 scaleZ(2) 是纯 3D 变换，在 2D 场景下完全无效 —— 它需要父容器有 perspective 且自身开启 transform-style: preserve-3d，否则浏览器直接忽略。
缩放不只是“变大变小”：它会连带缩放整个局部坐标系。比如先 scale(0.5) 再 translateX(100px)，实际位移只有 50px（因为坐标轴被压缩了）。同样，transform-origin 的计算也会受缩放影响。
实操建议：
-
scale(0)元素视觉消失但仍在文档流中，仍占位、可交互（如 hover 仍触发），如需彻底隐藏，配合visibility: hidden或opacity: 0 -
scale(-1)实现镜像翻转，适合翻牌、按钮点击反馈等，注意文本也会反向，必要时对子元素再scale(-1)补正 - 缩放后元素尺寸变化，若后续依赖 JS 获取
offsetWidth，要意识到这是缩放后的视觉尺寸，不是原始 CSS 宽度
多个 individual transform 函数组合时顺序和层叠上下文要小心
CSS 解析 transform 值是从右往左执行的，所以 transform: translateX(100px) rotate(45deg) scaleX(2) 实际执行顺序是：先 scaleX(2)，再 rotate(45deg)，最后 translateX(100px)。这个顺序直接影响最终位置和形态。
更隐蔽的影响是：只要 transform 值不为 none，该元素就会创建新的层叠上下文和包含块。这意味着它的 position: fixed 子元素不再相对于视口定位，而是相对于它自己定位 —— 这在模态框、下拉菜单等场景中极易引发定位错乱。
实操建议：
- 调试复杂变换时，临时拆成单条声明测试，比如只留
rotate()，再加translateX()，观察叠加效果 - 避免在父级上滥用
transform，尤其当子元素要用fixed定位时；若必须用，考虑用will-change: transform提前提示，但别滥用 - 移动端要注意：某些老 Android WebView 对
transform的硬件加速支持不稳定，scale配合translate大幅缩放时可能出现模糊或闪烁，可加backface-visibility: hidden缓解
