Transform makes back side of 3D card unclickable - css

Question

I want to make flip like http://desandro.github.io/3dtransforms/examples/card-01.html
But with buttons on each side. So here is my html
<div class="flip-container">
<div class="flip">
<div class="side front">
<p>front</p>
<button class="front-flip-button">flip</button>
</div>
<div class="side back">
<p>back</p>
<button class="back-flip-button">flip</button>
</div>
</div>
</div>
and css
.flip-container{
position: relative;
-webkit-perspective: 800;
width: 500px;
height: 300px;
}
.flip{
position: absolute;
width: inherit;
height: inherit;
-webkit-transform-style: preserve-3d;
-webkit-transition-duration: 500ms;
-webkit-transform: translate3d(0, 0, 0);
border: 1px solid;
}
.side{
position: absolute;
width: inherit;
height: inherit;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.flip.flipped,
.back{
-webkit-transform: rotate3d(0, 1, 0, 180deg);
}
.back-flip-button,
.front-flip-button{
position: absolute;
left: 0;
top: 0;
}
p{
font-size: 90px;
text-align: center;
}
And everything is pretty good, but when I use some element with translateZ it makes back button unclickable.
<div class="flip-container">
<div class="flip">
<div class="side front">
<p>front</p>
<button class="front-flip-button">flip</button>
</div>
<div class="side back">
<p>back</p>
<button class="back-flip-button">flip</button>
</div>
</div>
</div>
<div class="some"></div>
Why is that happening?
http://jsfiddle.net/j5Sm4/

Answer 1

Apply this
.back-flip-button {
... Your other styles ...
-webkit-transform:translateZ(1px);
-webkit-backface-visibility:hidden;
/* Needs other prefixes to be cross browser */
}
Demo
This is because the parent element gets its own stacking order. To equalize the stacking order and thus put the button on top, you have to give it a stacking order which I did using translateZ. The backface-visibility:hidden makes the button not show on the front side
In the future we will likely be able to do this by applying the will-change property to the back side