在开发过程中，我们经常遇到这样的需求：UI 设计稿上的某张图片，视觉上比容器"溢出"一点，看起来有一种放大、充盈的感觉。
直觉反应可能是直接改 width 或 height，但更优雅的方式是用 transform: scale()。
这篇文章从最基础的原理出发，把这个知识点讲透。
1、transform 是什么
transform 是 CSS 的一个属性，专门负责对元素做视觉上的变换。
它能做的事情包括：
| 函数 | 效果 |
|---|---|
scale() | 缩放 |
translate() | 平移 |
rotate() | 旋转 |
skew() | 倾斜 |
这些变换有一个共同的核心特点：
只改变视觉呈现，不影响文档流。
这一点非常关键，后面会专门解释。
2、scale() 是怎么工作的
scale(1.4) 的意思是：把元素放大到原来的 1.4 倍。
transform: scale(1.4); /* 等比放大 1.4 倍 */
transform: scale(0.8); /* 等比缩小到 0.8 倍 */
transform: scale(1.4, 1); /* 只横向放大，纵向不变 */
数字规律很简单：
1= 原始大小- 大于 1 = 放大
- 小于 1 = 缩小
3、transform-origin：缩放的基准点
这是很多人忽略的关键属性。
scale() 在放大或缩小时，以某一个点为中心向四周扩展。这个"中心点"就是 transform-origin 控制的。
transform-origin: center center; /* 默认值，以元素中心为基准 */
transform-origin: top left; /* 以左上角为基准 */
transform-origin: 0% 100%; /* 以左下角为基准 */
transform-origin: 50px 50px; /* 以距左上角 50px 处为基准 */
用一个图来理解：
以 center center 为基准放大：
放大前： 放大后：
┌────────┐ ┌──────────────┐
│ │ → │ │
│ · │ │ · │
│ │ │ │
└────────┘ └──────────────┘
四个方向均匀扩展
以 top left 为基准放大：
放大前： 放大后：
┌────────┐ ┌──────────────────┐
│ │ → │ │
│ │ │ │
└────────┘ │ │
└──────────────────┘
只向右和向下扩展，左上角固定不动
在车图场景中，transform-origin: center center 让图片以自身中心向四周均匀放大，视觉上图片"鼓"出来，营造充盈感。
4、为什么不直接改 width？
这是理解 transform 的核心问题。
直接对比两种方式：
方案一：改 width
.car-picture {
width: 140%; /* 原来 100%，现在放大 1.4 倍 */
}
方案二：用 scale
.car-picture {
width: 100%;
transform: scale(1.4);
}
看起来效果差不多，但本质完全不同：
| 改 width | transform: scale | |
|---|---|---|
| 文档流 | 会影响，可能撑开父容器 | 不影响，周围元素感知不到变化 |
| 触发重排 | 是（layout） | 否（只触发 composite） |
| 性能 | 较差 | 更好，GPU 加速 |
| 动画流畅度 | 一般 | 流畅（60fps 友好） |
transform 的变换发生在绘制阶段之后，浏览器把元素当作一个整体位图来处理，不重新计算布局。所以它既不会影响周围元素，性能也更好。
5、回到实际代码
.phone-picture {
position: absolute;
width: 100%;
top: 32%;
z-index: 0;
transform: scale(1.4);
transform-origin: center center;
}
逐行解读：
width: 100%：图片宽度撑满父容器，这是布局上的实际宽度transform: scale(1.4)：在视觉上再放大 1.4 倍，不影响布局transform-origin: center center：以图片中心为基准放大，四周均匀溢出
效果就是：图片在布局上占据正常位置，但视觉上"膨胀"出来，超出自身原始边界，形成 UI 想要的充盈放大感。
由于父容器设置了 overflow: hidden，溢出的部分被裁掉，最终呈现出一张"刚好铺满、略有放大"的图片。
6、配合 overflow: hidden 的经典组合
这是实际开发中最常见的用法：
/* 父容器：裁切溢出内容 */
.phone-picture-wrap {
overflow: hidden;
}
/* 子图片：视觉上放大，溢出部分被父容器裁掉 */
.phone-picture {
width: 100%;
transform: scale(1.4);
transform-origin: center center;
}
scale 负责放大，overflow: hidden 负责裁切，两者配合产生"图片铺满容器且略有放大"的视觉效果，比直接改尺寸更干净，也更好维护。
7、一句话总结
transform: scale()改变的是视觉大小，不改变布局占位。配合transform-origin控制缩放基准点，配合overflow: hidden裁切溢出内容，是实现图片放大视觉效果的标准做法。
