在 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。

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

In a CSS transform, how to prevent shifting of scaled up element when scaling down

css

css-animations

css-transitions

css-transforms