transform and z-index not working in a page flip effect for Chrome and IE

Question

I made a simple example of a book with page flip ( fiddle ). I have defined different behaviours for odd and even pages to achieve this effect:

.page.even {
    transform: translateX(50%) rotateY(0deg);
    -ms-transform: translateX(50%) rotateY(0deg);
    -webkit-transform: translateX(50%) rotateY(0deg);
    transform-origin: left;
    -ms-transform-origin: left;
    -webkit-transform-origin: left;
}

.page.odd {
    transform: translateX(-50%) rotateY(180deg);
    -ms-transform: translateX(-50%) rotateY(180deg);
    -webkit-transform: translateX(-50%) rotateY(180deg);
    transform-origin: right;
    -ms-transform-origin: right;
    -webkit-transform-origin: right;
}

.page.even.flipped {
    transform: translateX(50%) rotateY(-180deg);
    -ms-transform: translateX(50%) rotateY(-180deg);
    -webkit-transform: translateX(50%) rotateY(-180deg);
}

.page.odd.flipped {
    transform: translateX(-50%) rotateY(0deg);
    -ms-transform: translateX(50%) rotateY(-180deg);
    -webkit-transform: translateX(50%) rotateY(-180deg);
}

All pages have z-index set to be in the right order (see fiddle). In Firefox it works well, but not for Webkit or IE browsers. It seems to me that in the other browsers the z-index and the transform does not work well together or have I missed something?

Answer 1

You should use:

.page.odd.flipped {
    transform: translateX(-50%) rotateY(0deg);
    -ms-transform: translateX(-50%) rotateY(0deg);
    -webkit-transform: translateX(-50%) rotateY(0deg);
}

And not:

.page.odd.flipped {
    transform: translateX(-50%) rotateY(0deg);
    -ms-transform: translateX(50%) rotateY(-180deg);
    -webkit-transform: translateX(50%) rotateY(-180deg);
}

Firefox used the transform , whereas the IE used -ms- and Chrome used -webkit- . Hence, you had no problems for Firefox: Fiddle .