为什么在2D缩放转换期间文本变得模糊不清和摇摆不定

Question

我想让这张卡在悬停时缩放（包括其中的元素），但是在转换过程中（当您将卡悬停时）文本会摇摆/抖动，并且在缩放时和缩放后会变得模糊（有时，某些比率比其他比率更大）
，我认为这是由于亚像素值舍入而引起的）。

在转换过程中如何消除抖动和模糊？

• 我不在乎IE浏览器，我只希望它在最新的Chrome中运行。

• 似乎是由transition财产引起的。

Codepen＃1：

.scalable {

  transition: 0.3s ease-in-out;

  box-shadow: 0 6px 10px rgba(0,0,0,0.14);

}

.scalable:hover {

  transform: scale(1.05);

  box-shadow: 0 8px 40px rgba(0,0,0,0.25);

}



.card {

  width: 100%;

  background: white;

  padding: 20px;

}



body {

  width: 50%;

  height: 100%;

  background: #999;

  padding: 20px;

}


<div class="card scalable">

  <div>here's some description</div>

</div>

更新：

我只是发现，当您以编程方式为其设置动画时，它不会摆动/抖动：

我可以将它用于JS吗？

Codepen：

.anim {

  animation: scale 0.3s ease-in-out infinite alternate;

}



@keyframes scale {

  to { transform: scale(1.05) }

}



.scalable {

  transition: 0.3s ease-in-out;

  box-shadow: 0 6px 10px rgba(0,0,0,0.14);

}

.scalable:hover {

  transform: scale(1.05);

  box-shadow: 0 8px 40px rgba(0,0,0,0.25);

}



.card {

  width: 100%;

  background: white;

  padding: 20px;

}



body {

  width: 50%;

  height: 100%;

  background: #999;

  padding: 20px;

}


<div class="el anim card scalable">

  <div>here's some description</div>

</div>

Answer 1

除了使用比例尺之外，您还可以考虑translateZ使用透视图。确保最初定义透视图，以避免在快速移动光标时产生不良影响：

.scalable{

  transition: 0.3s ease-in-out;

  box-shadow: 0 6px 10px rgba(0,0,0,0.14);

  transform:perspective(100px);

}



.scalable:hover {

  transform:perspective(100px) translateZ(5px);

  box-shadow: 0 8px 40px rgba(0,0,0,0.25);

}



.card {

  width: 100%;

  background: white;

  padding: 20px;

}



body {

  width: 50%;

  height: 100%;

  background: #999;

  padding: 20px;

}


<div class="card scalable">

  <div>here's some description</div>

</div>

减少模糊效果的一种方法是从负平移开始，然后回到0：

.scalable{

  transition: 0.3s ease-in-out;

  box-shadow: 0 6px 10px rgba(0,0,0,0.14);

  transform:perspective(100px) translateZ(-5px);

}



.scalable:hover {

  transform:perspective(100px) translateZ(0px);

  box-shadow: 0 8px 40px rgba(0,0,0,0.25);

}



.card {

  width: 100%;

  background: white;

  padding: 25px;

}



body {

  width: 50%;

  height: 100%;

  background: #999;

  padding: 20px;

}


<div class="card scalable">

  <div>here's some description</div>

</div>