在CSS变换中，如何在缩小时防止缩放元素的移动
在CSS变换中，如何在缩小时防止缩放元素的移动
提问于 2020-12-11 21:51:56
我想使用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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-11 21:57:43
发生这种情况的原因是您在第一次悬停元素时声明了transform-origin。
解决方案:将transform-origin: left top;从#test:hover迁移到#test。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65252625
复制相关文章
相似问题
腾讯云开发者
