如何解决 transform 的 scale 缩放后图片和文字失真

悬赏园豆：30 [待解决问题] 浏览: 124次

<div class="reversal-frame scale-element">
    <div class="card">
      <div class="front">
        <p>克拉拉，我的克拉拉</p>
      </div>
      <div class="back">
        <div class="hero threeD">
          <h2>克拉拉</h2>
          <div>
            <span>可爱</span>
            <span>萝莉</span>
            <span>白发</span>
          </div>
        </div>
        <ul class="desc threeD">
          <p>被机器人养大的女孩，有着超越年龄的通透和坚持。</p>
          <p>对克拉拉而言，史瓦罗理性的计算是世界法则，绝不会出错。</p>
          <p>直到发现「计算」得到的结果，并不一定能带给大家幸福。</p>
          <p>怯生生的女孩决定勇敢起来。</p>
        </ul>
      </div>
    </div>
  </div>

.reversal-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, skyblue, purple);
  flex: auto;
  overflow: hidden;

  .card {
    width: 435px;
    height: 580px;
    position: relative;

    .back,
    .front {
      position: absolute;
      top: 0;
      left: 0;
      backface-visibility: hidden;
      transition: transform 1.5s;
      transform-style: preserve-3d;
    }

    .front {
      background: url(@/assets/images/reversal-frame/1683441134216.jpeg);
      background-size: cover;
      color: #ccc;
      width: 100%;
      height: 100%;
      text-align: center;
      border-radius: 15px;

      &::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 80px;
        top: 55%;
        background-color: rgba(0, 0, 0, .45);
        transform: translate3d(-50%, -50%, 20px);
      }

      p {
        width: 100%;
        position: absolute;
        top: 55%;
        transform: translateZ(80px);
      }
    }

    .back {
      width: 100%;
      height: 100%;
      color: #fff;
      background-color: #191e15;
      padding: 20px;
      border-radius: 15px;
      transform: rotateY(180deg);

      .hero {
        border-bottom: 2px solid #b49758;
        padding-bottom: 15px;
        // 不知什么原因这个下面的内容会往上提一下
        margin-bottom: 2px;

        h2 {
          font-size: 20px;
          color: #f8fae4;
          font-weight: 400;
          margin-bottom: 10px;
        }

        span {
          text-align: center;
          background-color: #c09f5a;
          line-height: 25px;
          border-radius: 2px;
          color: #191d20;
          font-weight: bold;
          margin-right: 10px;
          padding: 5px;
        }
      }

      .desc {
        text-indent: 2em;
        font-size: 18px;
        color: #fff;
        text-align: left;
        line-height: 1.7em;
        padding: 10px 5px;
        letter-spacing: 2px;
      }
    }

    .threeD {
      backface-visibility: hidden;
      transform: translateZ(60px);
    }

    &:hover {
      .front {
        transform: rotateY(-180deg);
      }

      .back {
        transform: rotateY(0deg);
      }
    }
  }
}