Question

我在使用css transform：scale（1.4）时遇到问题，使得Google Chrome浏览器中的文本模糊，在Firefox中也是如此。

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

通常，它可以在Firefox中使用。但是，在Firefox中，背面可见性已被窃听（自2015年以来...），并且需要一个可通过应用transform来完成的修复：rotateX（0deg）。但是，应用此修复程序后，文本变得模糊！

我尝试了here和其他两个stackoverflow线程的所有解决方案。

我的代码：

 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)。

Answer 2

如果缩放任何元素，则图像，卡片布局或字体大小可能会变得模糊。您在rem中使用字体大小，而不是在rem中使用字体大小的vw属性。

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

2 个答案:

解决方案：