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...

Could you provide the rest of your code please? – Qantas 94 Heavy Oct 13 '13 at 13:30 — Qantas 94 Heavy, Oct 13 '13 at 13:30

myajouri · Accepted Answer · 2013-10-14T14:39:55.100

2

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

edited Oct 14 '13 at 14:39

answered Oct 13 '13 at 14:51

myajouri

3,076
18
13

Thanks. I did that and works fine when swiping from right to left. but when flip backwards (right to left), it always show the front page.. – xialin Oct 13 '13 at 15:13
Make sure your 'back' div has a -webkit-transform: rotateY(180deg) in the CSS. If this doesn't work then it would be helpful to provide a live demo of your code to troubleshoot. – myajouri Oct 13 '13 at 15:29
the rotateY(180deg) when should I add the css? after flipping or before? – xialin Oct 13 '13 at 15:55
It should be in the CSS file from the beginning. It will make sure the back div is facing the right way. The JS for turning should be applied to the page div and not the front/back divs. – myajouri Oct 13 '13 at 15:59
It seems I should set when the rotation hits 90 degree.. but I don't know how to capture the moment it turns 90deg – xialin Oct 14 '13 at 13:01
I've added a CSS-only demo, the animation in done is CSS (on hover) but it should be the same idea. You shouldn't need to set the back div's CSS during page rotation. – myajouri Oct 14 '13 at 14:47
Thank you so much for your patience and the detailed example!!! I really appreciate that :D – xialin Oct 15 '13 at 15:21

Use CSS Transform rotateY() on a div element

1 Answers1