CSS transform 属性会完全覆盖先前的变换声明，导致 hover 中仅写 scale() 时丢失 translate(-50%, -50%)，从而使缩放以元素默认原点（左上角）进行；解决方法是合并变换或改用独立的 translate/scale 属性。
css `transform` 属性会完全覆盖先前的变换声明，导致 `hover` 中仅写 `scale()` 时丢失 `translate(-50%, -50%)`，从而使缩放以元素默认原点（左上角）进行；解决方法是合并变换或改用独立的 `translate`/`scale` 属性。
在 CSS 动画中，transform 是一个复合属性，每次赋值都会完全替换之前的全部变换操作，而非叠加。你为 #item3 设置了初始 transform: translate(-50%, -50%)，使其居中定位；但 #item3:hover 中仅声明 transform: scale(2)，这会清空并取代原有的 translate，导致缩放原点回归元素自身的坐标系原点——即左上角（transform-origin: 0 0 默认值），从而出现“从左上角放大”的视觉效果。
✅ 正确做法有两种，推荐后者（更清晰、更易维护）：
方案一：在 hover 中显式合并所有变换
#item3 {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%); /* 初始居中 */
/* ...其他样式 */
}
#item3:hover {
transform: translate(-50%, -50%) scale(2); /* 保持居中 + 缩放 */
transition: transform 2s ease;
}⚠️ 注意：变换函数顺序很重要——scale 在 translate 后应用，等效于先缩放再平移，不影响原点逻辑；但若写成 scale(2) translate(-50%, -50%)，则缩放后平移距离也会被放大（如 -50px 变成 -100px），导致错位。
方案二（推荐）：使用独立的 translate 和 scale 属性
现代 CSS 支持将变换拆分为原子属性（CSS Transforms Level 2），它们互不干扰，可单独过渡：
立即学习“前端免费学习笔记（深入）”；
#item3 {
position: absolute;
top: 50%; left: 50%;
translate: -50% -50%; /* ✅ 独立控制位移 */
scale: 1; /* ✅ 独立控制缩放 */
/* ...其他样式 */
}
#item3:hover {
scale: 2; /* 仅修改 scale，translate 不受影响 */
transition: scale 2s ease;
}✅ 优势：语义清晰、无叠加风险、支持独立过渡（如仅对 scale 添加 transition）、兼容性良好（Chrome 104+、Firefox 111+、Safari 16.4+；旧浏览器可加 transform 回退）。
补充说明：transform-origin 并非根本解法
虽然可通过 transform-origin: 50% 50% 强制缩放中心为元素中心，但这无法解决定位偏移问题——因为你的元素本身未居中（top: 50%; left: 50% 仅定位左上角），此时 transform-origin 调整的是缩放参考点，而非整体位置。真正需要的是先正确定位，再独立控制缩放。
? 总结：
- ❌ 避免在不同状态间用 transform 覆盖同一元素的多个变换；
- ✅ 优先使用 translate / scale / rotate 等独立属性，提升可维护性与精确性；
- ? 若需兼容旧浏览器，采用 transform: translate(...) scale(...) 合并写法，并确保函数顺序合理。
