CSS 变换（缩放）使文本模糊

Question

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

在谷歌浏览器中，它总是模糊不清。

通常，它可以在 Firefox 中运行。但是，在 Firefox 中，背面可见性存在问题（自 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

我一直在尝试这个，似乎是：

• perspective
• transform: scale(...)
• transform: rotateY(...)

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

解决办法：

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