1. 将元素设为 10em 并使用 transition 的正确姿势
1.1 为什么要优先使用 transform 来实现放大
在“将元素设为 10em 并使用 transition”的场景里，关键点在于过渡属性要对齐，否则你看到的将不是平滑的放大效果。与直接改变宽高相比，transform（尤其是 scale）的动画往往更顺滑，因为它通过合成层实现像素级放大，而不会引发文档流的重排，因此对性能友好，放大效果更稳定。
当你把放大效果绑定到 width/height 的过渡时，浏览器需要重新计算布局，可能造成卡顿或看不到明显的视觉变化，尤其盒模型中存在 padding、border、min/max 等约束时。此时，使用 transform 来放大，能避免这些布局重排带来的干扰，从而提供连续的视觉体验。放大 via transform 是实现“将元素设为 10em 并使用 transition”的最佳实践之一。
/* 将元素设为 10em，并通过 transform 实现放大 */
.box {display: inline-block;width: 10em;height: 3em;background: #e5f7ff;transition: transform 0.25s ease;transform-origin: center center;
}
.box:hover {transform: scale(1.25);
}
通过上面的代码，放大动作发生在 transform，而宽度仍然是以 10em 为基准，观感更可控。若你直接改变 width，尽管可能实现了放大，但体验往往不如 transform 自然，因此应优先采用前述写法。transition 与 transform 的组合，是实现 10em 放大时的推荐方案。
2. 为什么放大效果看不到：原理分析
2.1 em 单位的本质与对放大的影响
首先要明白，em 是相对于当前元素的字体大小来计算的单位。也就是说，10em 的实际像素值会随字体大小而变化，如果字体大小在某些情况下不稳定，则 10em 的视觉效果也会随之变化。这也是为什么仅仅依赖于 em 的尺寸来做放大动画，容易出现“不稳定的放大感”的原因之一。理解 em 的层级依赖关系，可以帮助你判断何时应改用 rem 或直接使用 transform。
如果父容器、子元素或根元素的字体大小发生了改变，10em 的实际宽度也会跟着调整，这会让你误以为放大失败。此时，对比度更明确的做法是通过 transform 来实现放大，而不是单纯修改 width/height，从而避免字体大小的连锁影响。em 的相对性是放大不可忽视的根源。
/* 非最佳做法：尝试仅通过宽度过渡实现放大，效果可能不明显 */
.box {display: inline-block;width: 10em;padding: 0.5em;background: #f0f0f0;transition: width 0.25s ease;
}
.box:hover { width: 14em; }
上面的做法在某些情况下会因为字体、内边距和边框的组合导致放大不明显或不连贯。这就是为何在“将元素设为 10em 并使用 transition”的场景中，很多时候需要将放大以 transform 的形式完成，而非仅靠 width 的改变。em 的本质特性与布局重排的冲突，是放大看不到的关键原因。
3. 解决方法与最佳实践
3.1 使用 transform 放大并设置 transform-origin
要让放大效果清晰可见，最直接的办法是通过 transform: scale() 来实现，并显式设置 transform-origin 来确定放大锚点。这样放大的视觉焦点就会稳定在你希望的位置，10em 作为初始尺寸不会被其他布局因素干扰。transform-origin 的设置决定了放大时的锚点，通常选择 left center 或 center center 以获得直观的扩张效果。transform 的硬件加速也会提高流畅度。
下面的示例展示了如何在保持 10em 基础宽度的前提下，通过 transform 放大元素，并通过 will-change 提示浏览器优化合成层：will-change 和 transform-origin 是提升动画性能的常用手段。放大效果来自 transform 而非布局属性，因此更稳定。
/* 推荐做法：使用 transform 放大并设置 transform-origin，以及 will-change 提示 */
.box {display: inline-block;width: 10em;height: 3em;background: #d9f7d9;transition: transform 0.25s ease;transform-origin: left center;will-change: transform;
}
.box:hover {transform: scale(1.3);
}
3.2 避免仅使用 width/height 过渡的陷阱与替代做法
如果你执意要通过更改 width/height 来实现放大，需要注意潜在的陷阱，例如内容自适应、边框与内边距的叠加、以及 min-width/min-height 限制可能导致实际放大幅度不明显。为避免这些问题，建议在需要时将放大行为拆分到一个独立容器中，通过对该容器应用 transform 实现放大，而不是直接改变原始盒子的尺寸。将放大动作与布局分离，是提升可见性的有效策略。
另外，为了确保跨浏览器的一致性，可以在放大动画前后增加临时的视觉缓冲：在触发放大前，先将容器设为一个初始状态；在放大阶段，确保 overflow: visible，避免内容被裁切，同时确保父容器不会对变换产生额外的约束。视觉连贯性依赖于正确的容器边界处理。
/* 备选做法：通过容器包裹实现稳定放大，并避免直接改变原盒子的尺寸 */
.wrapper {display: inline-block;padding: 0.25em;
}
.box {display: inline-block;width: 10em;height: 3em;background: #e6f5ff;transition: transform 0.25s ease;transform-origin: left center;
}
.wrapper:hover .box {transform: scale(1.25);
}
