Use CSS Transform rotateY() on a div element

Question

I have a div element 'page', which contains two children div 'front' and 'back'. I want to do a flipping page effect with transform rotateY(Ndeg).

this.$flippingPage.css({
    '-webkit-transform': 'rotateY(-' + angle + 'deg)',
    '-moz-transform': 'rotateY(-' + angle + 'deg)'
});

When I drag the page, the flipping effect happens.. but the problem is.. it's shaky.. sometimes the front page shows, sometimes the back page shows on top.. I inspected the 'page' element and changed the rotate value one degree by one degree, it turns out that at certain degree front shows and other degrees back shows..And it only happens on Chrome (fine on Firefox). My expected behaviour is... e.g. flipping from left to right: show front page for the first 90deg and show back page for the second 90deg. Don't know it's an issue with browser or I missed any condition checking...

Answer 1

This sounds like a backface-visibility problem. Make sure the following CSS is added to your divs:

'front' and 'back' divs: -webkit-backface-visibility: hidden;

'page' div: -webkit-transform-style: preserve-3d;

You'll get a nicer 3D transition if you add -webkit-perspective: 1000; to whatever element that is wrapping 'page'.

Update:

Simplified CSS-only demo