Webkit backface visibility not working

Interestingly enough, if you set opacity to anything other than 1 (say, .99), suddenly the backface-visibility will come into effect.

Just put this -webkit-transform:rotateY(0deg);, you need to tell the browser which is the front face first.

I had a similar problem with children of such an element when a child had a webkit-transform. I noted that I had to set the backface visibility on that element as well:

<style>
#div1 {
    -webkit-transform: rotateX(180deg);
    -webkit-backface-visibility: hidden;
}
#div2 {
    -webkit-transform: translate3d(0,0,0);
}
</style>

<div id="div1">
    <div id="div2">
        Text
    </div>
</div>

So the solution is to use as well:

#div2 {
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden; /* again */
}