2. CSS 2D 变换：transform: scale() 的语法、参数、坐标系与变换原点
缩放，说白了就是让元素变大或变小。但你别小看这个 scale()，它背后牵扯到坐标系、变换原点、以及浏览器渲染的底层逻辑。我刚开始用 CSS 做动画那会儿，就因为在缩放时没搞懂变换原点，结果整个布局都飞了——嗯，从那以后我再也不敢跳过这个基础了。
2.1 语法与参数
scale() 是 CSS transform 属性下的一个 2D 缩放函数。它的语法非常简洁：
/* 单值语法：X 和 Y 轴同时缩放 */
transform: scale(2); /* 放大 2 倍 */
transform: scale(0.5); /* 缩小到一半 */
/* 双值语法：分别控制 X 和 Y 轴 */
transform: scale(1.5, 0.8); /* X 轴放大 1.5 倍，Y 轴缩小到 0.8 倍 */
/* 负值：镜像翻转 */
transform: scale(-1, 1); /* 水平镜像 */
参数规则：
- 参数是 无单位数字，表示缩放倍数
1= 原始大小，>1= 放大，0~1= 缩小0会让元素消失（但依然占据空间）- 负值会产生镜像效果，我曾在做翻转卡片时用过这个特性
我的习惯：写缩放时尽量用双值语法，哪怕两个值相同。这样以后改单轴缩放时，不用再补第二个参数，代码更健壮。
2.2 坐标系：缩放到底以什么为基准？
你想想看，一个元素放大两倍，它的左上角、中心点、右下角，哪个位置会保持不变？
答案是：默认以元素中心为基准。但这里的「中心」其实是由 transform-origin 决定的。
CSS 2D 变换的坐标系是这样的：
- X 轴：向右为正方向
- Y 轴：向下为正方向（和数学坐标系相反）
- 原点：默认在元素的
50% 50%（几何中心）
我画了一张图，帮你直观理解这个坐标系和缩放的关系：
我曾经踩过的坑：做响应式布局时，对一个绝对定位的元素用了 scale(0.5)，结果它的位置偏移了。原因就是缩放改变了元素的视觉尺寸，但 top/left 依然基于原始尺寸计算。后来我改用 transform-origin: top left 才解决。
2.3 变换原点：transform-origin
transform-origin 决定了缩放的中心点。它的语法很灵活：
/* 关键字 */
transform-origin: center; /* 默认值，等价于 50% 50% */
transform-origin: top left; /* 左上角 */
transform-origin: bottom right; /* 右下角 */
/* 百分比 */
transform-origin: 30% 70%;
/* 长度值 */
transform-origin: 20px 40px;
不同原点对缩放效果的影响，我用一个表格帮你对比：
| 变换原点 | 缩放效果 | 典型应用场景 |
|---|---|---|
center (默认) |
元素从中心向四周均匀缩放 | 通用缩放、悬停放大效果 |
top left |
左上角固定，向右下缩放 | 导航菜单展开、下拉面板 |
bottom center |
底部中心固定，向上缩放 | 弹出提示、工具提示 |
自定义百分比 |
以指定点为基准缩放 | 精细控制动画锚点 |
我的经验：做 hover 放大卡片时，用 transform-origin: center 最自然。但如果是做「从左上角展开」的菜单动画，一定要改成 top left，否则元素会先往右下跑再展开，视觉上很别扭。
2.4 实际案例：从代码看效果
光说不练假把式。我们写一个实际例子，看看不同原点下的缩放差异：
<div class="box">默认中心缩放</div>
<div class="box origin-top-left">左上角缩放</div>
<div class="box origin-bottom">底部中心缩放</div>
<style>
.box {
width: 200px;
height: 100px;
background: #3498db;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s;
margin: 20px;
}
.box:hover {
transform: scale(1.3);
}
.origin-top-left {
transform-origin: top left;
}
.origin-bottom {
transform-origin: bottom center;
}
</style>
你看，同样的 scale(1.3)，因为原点不同，放大后的位置完全不同。默认中心缩放时，元素向四周均匀扩展；左上角缩放时，只有右下方向延伸；底部中心缩放时，元素向上方和两侧扩展。
2.5 缩放与布局的关系
这里有个关键点，我当年花了很长时间才真正理解：
核心原则：transform: scale() 只改变元素的 视觉呈现，不改变元素的 布局尺寸。
- 元素在文档流中占据的空间不变
- 兄弟元素不会因为缩放而重新排列
- 父元素的高度不会自适应缩放后的内容
举个例子：一个 200px 宽的元素，scale(2) 后视觉上变成 400px，但它的 offsetWidth 依然是 200px。周围的元素该在哪还在哪，不会给它让路。
避坑指南：如果你需要缩放后让布局也跟着变，别用 transform: scale()，改用 width/height 或 zoom 属性。但 zoom 的兼容性和渲染性能不如 transform，我一般只在非关键场景用。
2.6 性能与渲染
为什么推荐用 transform: scale() 做动画？因为它能触发 GPU 加速。
浏览器处理 transform 时，会把元素提升到一个独立的合成层（compositor layer），然后交给 GPU 处理。这意味着：
- 不会触发重排（reflow）
- 不会触发重绘（repaint）
- 动画流畅，60fps 轻松达成
相比之下，用 width/height 做缩放动画，每次变化都会触发重排，性能差很多。我在做移动端 H5 页面时，所有缩放动画一律用 transform，从没出过性能问题。
2.7 本章小结
来，我们快速过一遍这章的核心：
scale()接受无单位数字，单值同时缩放 XY，双值分别控制- 坐标系 X 向右、Y 向下，原点默认在元素中心
transform-origin控制缩放基准点，用关键字或百分比- 缩放只改变视觉，不改变布局尺寸
- GPU 加速让
transform成为动画首选
嗯，这些基础打牢了，后面学 3D 缩放和组合变换时，你就不会觉得吃力了。