这四个函数是同一坐标系下的操作指令，顺序、单位、参照系任一出错都会导致视觉异常；需注意display类型、百分比基于自身宽高、单位不可混用、transform-origin须前置、复合变换顺序敏感、scale影响后续位移基准、skew本质为剪切非旋转。
直接说结论：这四个函数不是独立“开关”，而是同一套坐标系下的操作指令，顺序、单位、参照系稍有偏差，视觉结果就可能完全不对。
translate 位移必须注意单位和参照系
常见错误是写 translateX(50%) 却发现元素没动——大概率因为它是 span 这类行内元素，默认不参与 transform 渲染，得先加 display: inline-block 或 block。百分比值永远按元素**自身宽高**算，不是父容器；translateX(100%) 是向右移动自己宽度的一半？错，是整个自身宽度。
-
translate(10px, 20px)合法，translate(10px, 20%)非法（混合单位不允许） - 只动一个方向时，优先用
translateX()或translateY()，避免写错顺序或漏参数 - 负值完全合法：
translateY(-50%)向上移动自身高度的一半 - 动画中频繁用
translate(-50%, -50%)居中，但要确认父容器有定位（如position: relative）
rotate 必须带 deg 单位且原点默认在中心
rotate(45) 不生效，rotate(45deg) 才对；rotate(-90deg) 是逆时针转 90 度。默认绕元素几何中心旋转，想绕左上角？得配 transform-origin: top left，而且这条声明必须写在 rotate() 之前，否则浏览器按层叠顺序可能忽略。
- 连续旋转如
rotate(720deg)和rotate(0deg)视觉一致，但动画里会多转两圈，别盲目堆大数值 - 复合变换时顺序敏感：先
scale(0.5)再rotate(45deg)，和反过来，结果不同 -
rotate(180deg)常用于翻转图标，但要注意文字也会倒过来
scale 缩放会影响子元素和后续变换的计算基准
scale(2) 是等比放大两倍，scaleX(1.5) 只拉宽不压高，scaleY(0.6) 只压扁高度。scaleZ() 是 3D 函数，在纯 2D 场景下写了也白写，除非父容器启用了 transform-style: preserve-3d 和 perspective。
立即学习“前端免费学习笔记（深入）”；
-
scale(0)元素“消失”但仍在文档流中，占位还在 -
scale(-1)实现镜像翻转，常配合transform-origin控制翻转轴 - 缩放后，再写
translateX(100px)，实际位移仍是 100px；但若先scale(0.5)再translateX(100px)，位移按缩放后的坐标系算，相当于只动了 50px
skew 倾斜容易被当成“旋转”误用
skew(20deg) 是沿 X 轴倾斜 20 度，不是旋转；skew(20deg, 10deg) 表示 X 倾斜 20 度 + Y 倾斜 10 度。它和 rotate() 的数学本质不同：skew 是剪切变换，会拉伸形状，rotate 是刚体转动，不改变比例。
-
skewX()和skewY()更可控，尤其当只要单方向变形时 - 倾斜后元素的 bounding box 会变大，可能撑开父容器，必要时加
overflow: hidden - 不要指望
skew(-20deg)能“抵消”之前某个skew(20deg)—— 浮点误差和渲染精度会让最终位置偏移
真正难的不是记住每个函数怎么写，而是理解它们共享同一个变换矩阵，顺序、原点、单位、元素 display 类型，任意一个环节出错，整条 transform 链就失效。调试时优先检查 transform-origin 是否被覆盖、单位是否混用、行内元素是否加了 display，比反复改角度值更有效。
