Webkit backface visibility not working

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 */
}

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

If you have tested all other options here and nothing worked while this example works on your browser, then please make sure that element corresponding to #card from the example bellow has overflow:visible:

<div id="container">
    <div class="card">
        <div class="front face"></div>
        <div class="back face"></div>      
    </div>
</div>

I've encountered this problem in multiple versions of Chrome on Windows XP, including Chrome 24.

This fixed it:

1. Open chrome flag editor via this URL:
   

     chrome://flags/
   

2. Enable the following setting:
   

   Override software rendering list Overrides the built-in software rendering list and enables GPU-acceleration on unsupported system configurations.

3. Also make sure that accelerated CSS animations are enabled.

The fact this resolved the problem suggests Chrome considers my system an "unsupported system". As such your mileage may vary depending on Chrome's impression of your system.