变换比例：缩小比例的问题答案

【问题标题】：Transform scale: problem with scaling down变换比例：缩小比例的问题
【发布时间】：2021-04-21 22:53:25
【问题描述】：

我正面临某种奇怪的problem，它在缩小元素后发生。

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

&lt;div&gt;abc&lt;/div&gt;

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

谢谢。

【问题讨论】：

啊，我希望从我也发布的图像中可以清楚地看到。随着元素的缩小，我卡住了奇怪的线条（在图像中你可以看到它们）。我不希望它在那里，我想获得与扩大规模之前完全相同的状态。

标签： css animation transform scale

【解决方案1】：

改用 3D 变换：

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

&lt;div&gt;abc&lt;/div&gt;

【讨论】：