title: CSS3 Flip functionality (problems with backface-visibility)
body: <p>I am following a CSS3 tutorial to offer cardflip functionality.</p>
  
  <p>When the user hovers or touches the image, I wish for the image to flip over and display a 2nd image.</p>
  
  <p>So far, I have:</p>
  
  <pre><code>    /* entire container, keeps perspective */
  .flip-container {
      perspective: 1000;
  }
      /* flip the pane when hovered */
      .flip-container:hover .flipper {
          transform: rotateY(180deg);
          -webkit-transform: rotateY(180deg);
          -moz-transform: rotateY(180deg);
          -o-transform: rotateY(180deg);
      }
  
  .flip-container, .front, .back {
      width: 300px;
      height: 300px;
  }
  
  /* flip speed goes here */
  .flipper {
      transition: 0.6s;
      transform-style: preserve-3d;
      position: relative;
  }
  
  /* hide back of pane during swap */
  .front, .back {
      backface-visibility: hidden;
      -webkit-backface-visibility:hidden; /* Chrome and Safari */
      -moz-backface-visibility:hidden; /* Firefox */
      -ms-backface-visibility:hidden; /* Internet Explorer */
      position: absolute;
      top: 0;
      left: 0;
  }
  
  /* front pane, placed above back */
  .front {
      z-index: 2;
  }
  
  /* back, initially hidden pane */
  .back {
      transform: rotateY(180deg);
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/jP39d/" rel="nofollow noreferrer">http://jsfiddle.net/jP39d/</a></p>
  
  <p>The problem is that the front image shows the image still despite me setting <code>backface-visibility: hidden;</code>, but reversed. Image 2 is nowhere to be seen!</p>
  
  <p><img src="https://i.stack.imgur.com/JgPBS.png" alt="Reverse of 1st image"></p>