转换比例:按比例缩小的问题 [英] Transform scale: problem with scaling down

问题描述

我正面临某种奇怪的

div{填充:60px；边距:100px；背景颜色:红色；过渡:1s；}div:悬停{变换:缩放(1.2)；}

abc

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

谢谢.

解决方案

改用 3D 转换:

div{填充:60px；边距:100px；背景颜色:红色；过渡:1s；变换:透视(100px)translateZ(0)；}div:悬停{变换:透视(100px)translateZ(10px)；}

abc

I am facing to some kind of weird problem, which occurs after scaling down the element.

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

<div>abc</div>

Have you ever met with something like this? Does it occur because of some performance issue?

Thanks.

解决方案

Use a 3D transformation instead:

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>

这篇关于转换比例:按比例缩小的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！