title: CSS transforms - Image disappears when rotated beyond -180degrees
body: <p>Firstly, sorry for the question, I just can't work out where I'm going wrong after many hours of trying!</p>
  
  <p>I have three images, and I am trying to flip them -180 degrees using the transform:rotateY declaration.</p>
  
  <p>I have managed to get them to rotate, but once they get past the -180degrees mark they disappear. </p>
  
  <p>I also want the underlying divs, which contain some text, to appear after the image flips round -180 degrees - as if they were on the back of the image if that makes sense.</p>
  
  <p>Here's the codepen link - <a href="http://codepen.io/skoster7/pen/KgwXgB" rel="nofollow">http://codepen.io/skoster7/pen/KgwXgB</a></p>
  
  <p>Here's the code</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>.container {
    display: flex;
    perspective: 700px;
  }
  .photo img {
    transition-style: preserve-3d;
    transition-property: transform;
    transition-duration: 2s;
    width: 300px;
    height: 200px;
    top: 20px;
    margin: 10px;
  }
  .sideb {
    width: 300px;
    height: 200px;
    background: tomato;
  }
  sidea:hover {
    transform: rotateY(-180deg);
  }
  .sidea,
  .sideb {
    backface-visibility: hidden;
  }
  .sideb {
    transform: rotateY(180deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;div class="photo"&gt;
      &lt;img class="sidea" src="http://cdn.history.com/sites/2/2015/04/hith- 
              father-christmas-lights-iStock_000029514386Large.jpg"&gt;
      &lt;div class="sideb"&gt;Christmas
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="photo"&gt;
      &lt;img class="sidea" src="https://upload.wikimedia.org/wikipedia/commons/7/79/HalloweenPumpkin2.jpg"&gt;
      &lt;div class="sideb"&gt;Halloween
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="photo"&gt;
      &lt;img class="sidea" src="http://motormarks.co.uk/news/wp-content/uploads/2015/04/easter-chicks.jpg"&gt;
      &lt;div class="sideb"&gt;Easter
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance for any help!</p>