我想使用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>发生这种情况的原因是您transform-origin在第一次将鼠标悬停在元素上时进行了声明。
解决方案：transform-origin: left top;从#test:hover移至#test。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句