CSS3 Animation - Change image on 'underside' of an animated element - css

Question

I am using CSS3 animation to have a door element open on hover. If you take a look at the url below: http://www.superfreebingo.com/advent-lp/
When you hover over a box the css animation will begin showing you content beneath.
I would like to modify the 'underside' of the door that opens, you will notice at the moment you just see the front image in reverse..
Will it be a case of timing another animation on the background image itself to coincide with the point the door 'flips' over?

Answer 1

So what you are looking for is backface-visibilty. Set that to the .box img.
Now add an element below that image, here I just added a pseudo-element, positioned it absolute with z-index: -1;.
You could also just set a div or image as a child of .box, works just as well.
/* CSS needed for your affect */
.box img {
backface-visibility: hidden;
}
.box::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #FF0;
z-index: -1;
}
/* Rest of the markup */
article {
display: inline-block;
width: 6em;
height: 6em;
margin: .5em;
perspective: 850px;
}
article:hover .box {
transition: .5s ease-in;
transform: rotateY(-97deg);
transform-origin: 0 50%;
perspective-origin: 0;
}
.box {
position: relative;
transition: all .3s;
transform-origin: 0 50%;
text-align: center;
background-size: cover;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, .15);
transform-style: preserve-3d;
perspective: 850px;
cursor: pointer;
}
.box, .present {
width: 100%;
height: 100%;
}
.box img, .present img {
width: 100%;
height: 100%;
}
.present {
position: absolute;
z-index: -1;
top: 0;
left: 0;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, .15), inset 0 0 30px 20px rgba(0, 0, 0, .4);
}
.present a {
display: block;
width: 100%;
height: 100%;
}
<article>
<div class="box">
<img src="http://i.stack.imgur.com/wheDD.jpg">
</div>
<div class="present">
<a href="#">
<img src="http://i.stack.imgur.com/EXU8x.jpg">
</a>
</div>
</article>