为什么文本在 2d 缩放变换期间变得模糊和摇摆

Question

我想让这张卡片在悬停时缩放（包括其中的元素），但文本 wobbles/jitters 在转换过程中（当你悬停卡片时）在缩放期间和之后变得模糊（有时，某些比率高于其他比率，我认为这是由于亚像素值四舍五入所致）。

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

我不关心 IE 浏览器，我只希望它能在最新的 Chrome.
看来是transition 属性.
引起的

Codepen #1: https://codepen.io/x84733/pen/yEpYxX

.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>

更新：

我刚刚发现，当您以编程方式为其设置动画时，它不会 wobble/jitter:

我可以在 JS 中使用它吗？

Codepen: https://codepen.io/anon/pen/LqXwOb?editors=1100

.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

同时将原点从 100% 添加到 104%。这将防止跳跃和模糊的最终结果

.scalable {
  backface-visibility: hidden;
  transition: all 0.3s ease-in-out;
  transform-origin: 100% 104%;
}

.scalable:hover {
  backface-visibility: hidden;
  transform: scale(1.04);  
}

干杯！

Answer 2

您可以考虑 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>

为什么文本在 2d 缩放变换期间变得模糊和摇摆

Why is text getting blurry and wobbles during 2d scale transform

css

scale

css-transforms

更新：