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

前端 未结 2 1273
时光说笑
时光说笑 2020-11-28 15:39

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 blurr

相关标签:
2条回答
  • 2020-11-28 16:07

    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!

    0 讨论(0)
  • 2020-11-28 16:27

    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>

    0 讨论(0)
提交回复
热议问题