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

Question

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

4

我在Google Chrome中使用css transform:scale(1.4)时遇到问题，使得文本模糊，有些情况下在火狐浏览器中也会出现此问题。

在Google Chrome中，这种情况总是会发生模糊。

通常，在Firefox中它可以正常工作。但是，在Firefox中，backface-visibility存在缺陷（自2015年以来...），需要应用transform: rotateX(0deg)来修复。然而，应用该修复程序后，文本变得模糊！

我已经尝试了所有的解决方案，包括这里和其他几个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>

- lastnoob

1

以下是有关编程的内容，需要翻译成中文：在使用Python进行编程时，请解释“if name == 'main'：”的作用。 - Temani Afif

1

当一个功能存在缺陷时，你可以寻找替代方案来避免它：https://codepen.io/gc-nomade/pen/LKQLxZ 这可以节省时间。 - G-Cyrillus

为什么要进行缩放？为什么不改变“字体大小”？比如使用“font-size:1.4em”。 - enxaneta

@G-Cyr 我喜欢这个解决方法，但是高度和宽度不能动态调整，这不是最优的。可能最终会使用类似这样的东西。尽管如此，我认为这是意料之外的浏览器行为。 - lastnoob

1

好的，你可以先给卡片一个大小，比如300x300，并且还可以设置边距（以像素为单位）。如果你使用em或rem来调整卡片和边距的大小，那么只需要设置字体大小即可。 - G-Cyrillus

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- evilReiko · Accepted Answer

我一直在尝试这个，似乎结合以下内容：

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

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

解决方案：

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