transform旋转必须带单位，如rotate(45deg)；多函数需同写一行且顺序影响结果；scale默认以中心为原点，可由transform-origin调整；translate性能优于top/left，但不可混用；复合变换须整体重写或设为none。
transform 旋转必须带单位，deg 和 rad 别混用
直接写 rotate(45) 是无效的，CSS 不接受无单位数值。浏览器会忽略整个 transform 声明。必须明确指定角度单位：deg（度）、rad（弧度）、turn（圈数）或 grad（梯度）。
-
rotate(45deg)最常用，直观易读 -
rotate(0.125turn)等价于 45 度，适合做对称动画（如1turn表示完整一圈） -
rotate(0.785rad)数学计算场景可能用到，但手写易出错，不推荐日常使用 - 多个旋转叠加时，顺序影响结果：
rotateX(30deg) rotateY(45deg)≠rotateY(45deg) rotateX(30deg)
scale 缩放默认以元素中心为原点，但可配合 transform-origin 调整
scale(0.5) 会让元素宽高都缩为原来一半，视觉上“变小”，但它的定位基准点仍是默认的 50% 50%（即中心）。如果想让左上角不动、只向右下缩放，就得改原点：
div {
transform: scale(0.5);
transform-origin: top left;
}
-
transform-origin支持像素值（0 0）、百分比（0% 0%）、关键词（top left），三者等效 - 该属性不影响
transform计算逻辑，只改变所有变形（rotate/scale/translate/skew）的参考点 - 若同时设置
transform-origin和translate，注意 translate 是在缩放后发生的——也就是说，先缩放再平移，不是先平移再缩放
translate 平移不触发重排，但别和 top/left 混用
translateX(20px) 或 translate(20px, 10px) 是 GPU 加速的，不会引起 layout，性能优于 top + left。但两者混用会导致行为不可控：
- 给同一个元素同时设
top: 10px和transform: translateY(20px)，最终位移是 30px，但浏览器内部会降级为软件渲染（失去硬件加速） - 动画中若用 JS 动态修改
top，再用 CSS transition 控制transform，动画会跳变或卡顿 -
响应式布局里慎用
translate做“微调位置”：它不参与文档流，也不影响其他元素的布局计算，容易导致点击区域偏移或媒体查询失效
多个 transform 函数要写在同一行，顺序决定最终效果
CSS 中 transform 是单值属性，不能像 background 那样写多条规则覆盖。所有变形必须合并成一个函数调用：
div {
transform: rotate(30deg) scale(1.2) translateX(10px);
}
- 执行顺序从左到右：先旋转 → 再缩放 → 最后平移。这个顺序直接影响坐标系变化
- 比如
translateX(100px) rotate(90deg)和rotate(90deg) translateX(100px)效果完全不同：前者向右移再顺时针转90°；后者先转90°（此时 X 轴变成向下），再“沿新 X 轴”向下移 100px - 想复位某个变换？不能单独删掉某一项，得重写整个
transform值，或用none清空
transform 的复合顺序和 transform-origin 的隐式继承。父元素设置了 transform-origin，不会影响子元素——但子元素自己的 transform-origin 若没显式声明，就用默认值，而这个默认值在不同浏览器中极少数情况下有渲染差异。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
