为何使用transform:translate(-50%,-50%)时元素从左上角缩放？

当为#item3设置transform: translate(-50%,-50%);时，鼠标hover触发缩放会呈现“从左上角开始缩放”的视觉效果；移除该translate样式后，缩放中心则变为元素自身中心。这一现象的原因可拆解如下：

示例代码 #

CSS代码

body {
  background-color: rgb(156, 210, 69);
  height: 100vh;
  width: 100vw;
}

#item1 {
  display: inline-block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: red;
  height: 100px;
  width: 100px;
  box-shadow: 5px 5px 10px;
}

#item2 {
  display: inline-block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: green;
  height: 100px;
  width: 100px;
  box-shadow: 5px 5px 10px;
}

#item3 {
  display: inline-block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background-color: yellow;
  height: 100px;
  width: 100px;
  box-shadow: 5px 5px 10px;
}

#item3:hover {
  transform: scale(2, 2);
  transition: transform 2s ease;
}

HTML代码

<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>

原因解析 #

• transform属性是完全覆盖而非叠加：#item3初始的translate(-50%, -50%)是用来将元素中心对齐视口中心的，但hover状态下的transform: scale(2,2)直接替换了原来的translate规则，导致元素瞬间回到top:50% left:50%的原始定位——也就是元素的左上角对齐视口中心。
• 默认变换原点的视觉误导：CSS中scale的默认变换原点是transform-origin: center center（元素自身中心）。当元素左上角在视口中心时，元素自身中心在视口中心的右下方50px处，此时以这个点为中心缩放，视觉上会让你觉得是从元素左上角（视口中心位置）向外扩散。
• 移除translate后的正常表现：删掉初始的translate后，元素本来就处于左上角对齐视口中心的状态，hover时scale直接基于自身中心变换，所以你能清晰看到是围绕元素自己的中心缩放。

优化方案（保持中心缩放） #

如果想让hover时元素保持在视口中心同时缩放，需要把translate和scale合并到hover的transform里：

#item3:hover {
  transform: translate(-50%, -50%) scale(2, 2);
  transition: transform 2s ease;
}

内容的提问来源于stack exchange，提问作者Rishav