CSS hover transform元素左移而非向用户靠近问题求助

一、transform: scale() 导致元素左偏移的原因与解决 #

问题原因 #

transform: scale() 默认以元素的**中心（50% 50%）**作为变换原点。对于左对齐的元素，缩放时元素中心位置固定，导致元素整体向左超出原有位置，视觉上产生偏移；而设置了text-align: center的元素，中心本身在容器中间，缩放后不会出现偏移。

解决代码 #

修改变换原点为元素的左侧中心，让缩放时左边缘位置保持不变，仅向右/上下扩展：

h2, h3{
    transition: 0.5s;
    transform-origin: left center; /* 指定变换原点 */
}
h2:hover, h3:hover{
    transform: scale(2);
}

如果想要更贴近用户的3D缩放效果，可以给父元素添加透视属性，结合translateZ()增强立体感：

body {
    perspective: 1000px; /* 添加透视，模拟3D空间 */
}
h2, h3{
    transition: 0.5s;
    transform-origin: left center;
}
h2:hover, h3:hover{
    transform: scale(2) translateZ(10px); /* 缩放+向前位移 */
}

二、font-size: 200% hover过渡失效的解决 #

问题原因 #

直接使用百分比设置font-size时，若h2、h3未设置基础font-size值，会继承父元素的字体大小，浏览器无法正确计算过渡的差值，导致过渡效果失效。

解决代码 #

先给元素设置明确的基础font-size，再在hover时修改数值：

h2, h3{
    transition: 0.5s;
    font-size: 16px; /* 定义基础字体大小 */
}
h2:hover, h3:hover{
    font-size: 32px; /* 或使用200%，效果一致 */
}

注意：修改font-size会改变元素布局，影响周围元素位置；而transform缩放仅改变视觉表现，不会破坏布局，更推荐使用transform方案实现“靠近用户”的缩放效果。

内容的提问来源于stack exchange，提问作者VasyaT