带有变换比例和变换原点的小凹凸答案

【问题标题】：Small bump with transform scale and transform-origin带有变换比例和变换原点的小凹凸
【发布时间】：2022-01-02 20:15:38
【问题描述】：

我一直在努力理解为什么当我尝试使用 transform-origin: top 进行变换缩放时，动画从将对象向上一点点开始。

例如，我有这个 sn-p。过渡很长，以强调问题。谢谢！

.plus-sign {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: white;
  border: 2px solid #3b3b3b;
  outline: 3px solid white;
  transition: all 2s ease-in-out;
  position: absolute;
}

.plus-sign:hover {
  transform: scale(2);
  transform-origin: top;
  border: 1px solid #ff6250;
}

    &lt;div class="plus-sign"&gt;&lt;/div&gt;

【问题讨论】：

当我更改边框时：1px -> 2px in :hover，没有发生碰撞
我没有看到任何问题，您使用的是哪个浏览器？
@SamBruton Chrome 95.

标签： html css css-transforms

【解决方案1】：

您可以添加transform-origin: left top; 这会将其保留在正文中。此外，在边框上增加半个像素可以最大限度地减少所有碰撞行为。

.plus-sign {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: white;
  border: 2px solid #3b3b3b;
  outline: 3px solid white;
  transition: all 2s ease-in-out;
  position: absolute;
}

.plus-sign:hover {
  transform: scale(2);
  transform-origin: left top;
  border: 1.5px solid #ff6250;
}

&lt;div class="plus-sign"&gt;&lt;/div&gt;

【讨论】：