html - CSS transform (scale) 使文本模糊

Question

我在使用 css transform:scale(1.4) 时遇到问题，使 Google Chrome 中的文本变得模糊，在某些情况下在 firefox 中也是如此。

在 Google Chrome 中，它总是很模糊。

通常，它在 firefox 中工作。然而，在 Firefox 中，backface-visibility 存在漏洞(自 2015 年以来......)并且需要通过应用 transform: rotateX(0deg) 来完成修复。然而，应用修复后，文本变得模糊!

我已经尝试了 here 中的所有解决方案以及其他几个 stackoverflow 线程。

这是 codepen.

还有我的代码:

 body {
      background: #eee;
      font-family: 'Lato', sans-serif;
    
    }
    p {
        color: #3b3b3a;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Poppins', sans-serif;
        color: #3b3b3a;
    }
    .blue {
        color: #0e4b69!important;
    }
    .faded {
      color:rgba(14,75,105,0.2)!important;
    }
    
    .card {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300px;
      height: 300px;
      margin: -150px;
      perspective: 500px;
      transition: all 0.3s ease-in-out;
    }
    .card:hover {
      transform: scale(1.4);
      -webkit-font-smoothing: subpixel-antialiased;
    }
    
    .content {
      position: absolute;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
    
      transition: transform 1s ease;
      transform-style: preserve-3d;
    }
    
    .card:hover .content {
      transform: rotateY( 180deg ) ;
      transition: transform 0.5s;
    }
    
    .front,
    .back {
      position: absolute;
      height: 100%;
      width: 100%;
      background: white;
      color: #0e4b69;
      backface-visibility: hidden;
      border-radius : 12px;
      -moz-border-radius : 12px;
      -webkit-border-radius : 12px;
    }
    .front {
      font-size:1.8rem;
      text-align:left;
    }
    
    .back {
      background: rgba(255,255,255,0.95);
      color: #0e4b69;
      transform: rotateY( 180deg );
    }
    .front-container img.number, .back-container img.number {
      max-width:2.2rem;
    }
    .back-container img.number {
        margin-left: -0.5rem;
        margin-top: -0.5rem;
    }
    .front-container img.arrow {
      max-width:3.8rem;
      margin-right:-0.8rem;
      float:right;
    }
    .front-container h3 {
        margin-top: -2.1rem;
        margin-left: 1.1rem;
      margin-bottom:0px;
    }
    .back-container h5 {
        -webkit-font-smoothing: subpixel-antialiased;
        backface-visibility: hidden;
        text-align: center;
        margin-top: -2.9rem;
        margin-left: 0.4rem;
        margin-bottom: 0.4rem;
    }
    .back-container p {
      font-size:0.9rem;
          text-align: justify;
        margin-left: 0.6rem;
        margin-top: 0px;
    }
    
    .front-container, .back-container {
      padding:2rem;
    }

  <div class="card">
      <div class="content">
        <div class="front">
          <div class="front-container">
            <h3 class="blue">Having a vision and passion</h3>
          </div>
        </div>
        <div class="back">
          <div class="back-container">
            <h5 class="blue">Having a vision and passion</h5>
            <p>Being determined what I have to offer is my calling and purpose. Facing the nos, rejections, and failures. Overcoming limitations. Never settling or resting. Always finding another way. Constantly demanding more of myself. It takes everything and demands more.</p>
          </div>
        </div>
      </div>
    </div>

Answer 1

我一直在试验这个，似乎是以下的组合:

• 透视
• 变换:缩放(...)
• 变换:rotateY(...)

导致此行为。在我看来，这看起来像是浏览器错误或意外的浏览器行为。

解决方案:

移除 perspective，或在悬停时使用固定的 font-size 而不是 transform: scale(1.4)。