变换比例：按比例缩小的问题

Question

我遇到了某种奇怪的问题 problem，它发生在缩小元素之后。

div{
  padding: 60px;
  margin:100px;
  background-color:red;
  transition:1s;
}
div:hover {
  transform:scale(1.2);
}

<div>abc</div>

你遇到过这样的事情吗？是否由于某些性能问题而发生？

谢谢。

Answer 1

改为使用 3D 变换：

div{
  padding: 60px;
  margin:100px;
  background-color:red;
  transition:1s;
  transform:perspective(100px) translateZ(0);
}
div:hover {
  transform:perspective(100px) translateZ(10px);
}

<div>abc</div>

变换比例：按比例缩小的问题

Transform scale: problem with scaling down

css

animation

transform

scale