title: CSS scale and transform making text blury
body: <p>I have some flip cards and when you hover over the flip card, the card flips and enlarges (scales). However I don't want to the text inside the hovered card to scale so I put the text inside a child div. (I only want the parent card background to scale).</p>
  
  <p>How can I stop my text and content from scaling and going blurry? I've tried to reset my child div to 1/2 of the scale size to reset it but it does not work.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="c-flip-card"&gt;
    &lt;div class="c-flip-card__inner"&gt;
      &lt;div class="c-flip-card__front"&gt;&lt;img src="img_avatar.png" alt="Avatar"&lt;/div&gt;
       &lt;div class="c-flip-card__back"&gt;
          &lt;h1&gt;John Doe&lt;/h1&gt; 
          &lt;p&gt;Architect &amp; Engineer&lt;/p&gt; 
          &lt;p&gt;We love that guy&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SASS</p>
  
  <pre><code>.c-flip-card {
      background-color: transparent;
      width: 180px;
      height: 200px;
      border: 1px solid #f1f1f1;
      perspective: 1000px;
      /* Do an horizontal flip when you move the mouse over the flip box container */
      &amp;:hover {
          z-index: 10;
          position: relative;
      }
      &amp;:hover .c-flip-card__inner {
          transform: rotateY(180deg) scale(1.4);
      }
      /* This container is needed to position the front and back side */
      .c-flip-card__inner {
          cursor:pointer;
          position: relative;
          width: 100%;
          height: 100%;
          text-align: center;
          transition: transform 0.8s;
          transform-style: preserve-3d;
      }
      /* Position the front and back side */
      .c-flip-card__front, .c-flip-card__back {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
      }
      /* Style the front side (fallback if image is missing) */
      .c-flip-card__front {
          background-color: #bbb;
          color: black;
      }
      /* Style the back side */
      .c-flip-card__back {
          background-color: red;
          color: white;
          transform: rotateY(180deg);
      }
      .abc{
          transform: scale(0.7);
          h1, p{
              color:#000;
          }
      }
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/stevenSAUaa/492hvxta/1/" rel="nofollow noreferrer">jsfiddle</a></p>