title: How can I fix this css card flip transition?
body: <p>I'm trying to create two divs, in a parent, with one div with a class of front and the other with a class of back. I'm trying to flip the back one and place it under the front one, so when I flip its parent the back one shows and when its flipped again back the front one shows, creating a 3 dimensional card that flips when hovered. However anywhere the back overlaps with the front,the front is only visible no matter if its viewed from the front or the back. I have tried using backface-visibility: hidden on both, which from my understanding should make the back of the div not visible when flipped, but this results in the back completely disappearing and it having no effect on the front. I know this is possible because I have seen someone do this, but what am I doing wrong here and how can I fix these issues?</p>
  
  <p><a href="https://fiddle.jshell.net/h8vz85b3/2/" rel="nofollow noreferrer">https://fiddle.jshell.net/h8vz85b3/2/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt; media test&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="keywords" content="test,css, css test"&gt;
          &lt;meta name="description" content="A CSS test and review."&gt;
          &lt;meta name="author" content="brandon lind"&gt;
          &lt;link rel="stylesheet" media="screen" href="css/main.css"&gt;
          &lt;style&gt;
              .parent{
                  transition: transform 1s ease-in-out 0s;
                  width: 100px;
              }
              .parent:hover {
                  transform: rotateY(180deg);
              }
              .back,.front{
                  width: 100px;
                  height: 170px;
                  //backface-visibility: hidden;
  
              }
              .front{
                  background-color: blue;
                  transform: translate(0, -150px);
              }
              .back{
                  background-color: red;
                  transform: rotateY(190deg);          
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="parent"&gt;
              &lt;div class="back"&gt;
                  back
              &lt;/div&gt;
              &lt;div class="front"&gt;
                  front
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>