Firstly, sorry for the question, I just can't work out where I'm going wrong after many hours of trying!

I have three images, and I am trying to flip them -180 degrees using the transform:rotateY declaration.

I have managed to get them to rotate, but once they get past the -180degrees mark they disappear. 

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.

Here's the codepen link - <http://codepen.io/skoster7/pen/KgwXgB>

Here's the code

```css
.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);
}
```

```html
<div class="container">

  <div class="photo">
    <img class="sidea" src="http://cdn.history.com/sites/2/2015/04/hith- 
            father-christmas-lights-iStock_000029514386Large.jpg">
    <div class="sideb">Christmas
    </div>
  </div>

  <div class="photo">
    <img class="sidea" src="https://upload.wikimedia.org/wikipedia/commons/7/79/HalloweenPumpkin2.jpg">
    <div class="sideb">Halloween
    </div>
  </div>

  <div class="photo">
    <img class="sidea" src="http://motormarks.co.uk/news/wp-content/uploads/2015/04/easter-chicks.jpg">
    <div class="sideb">Easter
    </div>
  </div>

</div>
```

Thanks in advance for any help!