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

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>

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>

Also add the origin from 100% to 104%. This will prevent jumping and a blurry end result

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

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

Cheers!

Tags:

Css

Scale

Css Transforms

Recent Posts