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

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

除了使用比例尺之外，您还可以考虑

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 >  <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 >  <div>here's some description</div></div>