为什么在2D比例转换期间文本变得模糊不清和摇摆不定 [英] Why is text getting blurry and wobbles during 2d scale transform

问题描述

我想使此卡在悬停时缩放(包括其中的元素)，但是在转换过程中(当您将卡悬停时)文本会抖动/抖动，并且在缩放时和缩放后有时会变得模糊(有时会有所不同)我认为这是由于亚像素值舍入所致.

I want to make this card to scale on hover (including the elements inside it) but the text wobbles/jitters during the transformation (when you hover the card) and gets blurry during and after it's scaled (sometimes, with some ratios more than others, which I think is due to sub-pixel value rounding).

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

How do you remove that wobbling and blurriness during the transformation?

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

• I don't care about IE browsers, I only want it to work in the latest Chrome.

这似乎是由transition属性引起的.

It seems that it's caused by the transition property.

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>

我刚刚发现，当您以编程方式对其进行动画处理时，它不会摇摆/抖动:

I just found that when you animate it programatically, it doesn't wobble/jitter:

我可以将它用于JS吗?

Can I use that somehow with 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>

推荐答案

您可以考虑使用带透视图的translateZ而不是使用比例尺.请确保首先定义透视图，以免快速移动光标时产生不良影响:

Instead of using scale you can consider a translateZ with a perspective. Make sure to define the perspective initially to avoid the bad effect when moving the cursor fast:

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

One idea to reduce the blur effect is to start from the negative translate and then get back to 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比例转换期间文本变得模糊不清和摇摆不定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！