title: is there a way to flip only the flipcard and not the text containing in the flipcard
body: <p>The problem I have is whenever I flip the card(by hovering on the card) the text containing in the flipcard(Yellow or Red) depending on the flipcard you hover gets mirrored, how should I code to avoid text mirroring? I am new , please help as I am new to HTML concepts</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    width:200px;
    height:200px;
  
  } 
  
  .flip-card {
  
    display:inline-block;
  
    width: 200px;
    height: 200px;
    border: 5px solid #555;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: absolute:
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
  
    transform: rotateY(180deg);
  }
  
  .centrd {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
      font-weight: bold;
  
  }
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  
  /* Style the back side */
  .flip-card-back {
    background-color: lightgrey;
    color: red;
      transform: rotateY(180deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flip-card"&gt; 
    &lt;div class="flip-card-inner"&gt;&lt;div class="centrd"&gt;Yellow&lt;/div&gt;&lt;img src="yellow.png"&gt;  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>