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

Question

我一直在努力理解为什么当我尝试使用 transform-origin: top 进行变换比例时，animation 开始时将 object 向上一点点。

例如，我有这个片段。 过渡很长，以强调问题。 谢谢！

 .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; }

 <div class="plus-sign"></div>

Answer 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; }

 <div class="plus-sign"></div>