在 CSS 转换中，如何防止在缩小时移动放大的元素

Question

我想使用 css 在鼠标悬停时放大元素，并在鼠标离开元素时再次缩小元素。在所有缩放过程中，左上边缘应保持不变。

以下代码几乎完成了我想要的操作，只是当我离开鼠标时，元素在缩小之前向左移动。我希望缩小从放大后的结束位置开始。

我怎样才能做到这一点？

#test {
  height: 100px;
  width: 100px;
  background-color: lightgray;
  margin-left: 100px;
  margin-top: 100px;
  transition: transform 2s;
}  
#test:hover {
  transform: scale(2);
  transform-origin: left top;
}

<div id="test">Text</div>

Answer 1

发生这种情况的原因是您在第一次悬停元素时声明了transform-origin。

解决方案： 将transform-origin: left top; 从#test:hover 移动到#test。