如何使HR元素通过scale仅向左水平缩放？类名已设置仍未解决

问题核心在于默认的transform-origin属性值为50% 50%（元素中心），导致scaleX缩放时会向两侧同时扩展。要实现仅向左缩放，只需修改变换原点为元素的右侧边缘：

修改后的完整CSS代码 #

.line {
  position: absolute;
  transition: transform 1.5s ease-out;
  width: 10%;  
  height: 5px;  
  background-color: white;      
  margin-left: 20%;  
  margin-top: 10%;
  /* 将变换基准点设为元素右侧中心 */
  transform-origin: 100% 50%;
}

.line:hover {
  /* 按需调整缩放倍数，50倍过于夸张，示例用5倍 */
  transform: scaleX(5);
}

关键说明 #

• transform-origin: 100% 50%：把缩放的固定点设置在元素的水平右侧、垂直中心位置，这样缩放时只会从该点向左延伸，不会向右扩展。
• 保留transition属性保证缩放动画平滑过渡。
• 注意scaleX的倍数不要设置过大（比如原代码的50），否则元素可能超出视口范围，建议根据实际布局调整合适的数值。

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