CSS比例不从中心缩放[重复]答案

【问题标题】：CSS scale not scaling from center [duplicate]CSS比例不从中心缩放[重复]
【发布时间】：2020-09-12 23:06:00
【问题描述】：

我正在使用缩放来放大悬停时的元素，在我添加 transform:translate(-50%,-50%); 之前它工作正常.然后它开始从右下角而不是从中心缩放元素。这是我的代码：

.skyimage{
  height:100px;
  width:100px;
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  top:150px;
  transition:.5s;
  background:transparent;
}


.skyimage:hover{
  transform:scale(1.2) translate(-50%,-50%);
}

【问题讨论】：

嗨，你能显示代码 sn-p 或沙箱（jsfiddle，codepen）吗？
我一直在处理一个 HTML 文件，但如果可能的话，我可以给你发一个视频
将scale 转换移动到 translate ... 之后...顺序很重要。
是的，成功了，谢谢！

标签： html css scale css-transforms

【解决方案1】：

transform的意思：translate(-50%,-50%)是：-

-沿 x 轴向左移动我宽度的 50%，然后

-沿 y 轴向上移动我身高的 50%

因此这不会从中心缩放图像，因为该比例就足够了

【讨论】：

如果我只做 transform:scale(1.2);，当我将鼠标悬停在它上面时，元素会左右移动。
所以添加转换翻译确实有帮助，但看起来还是有点奇怪。
如果可能，上传完整代码并从 .skyimage 中删除 translate 命令
完整代码300多行