Question

I try to make a flip-page effect in IE10.

Because IE10 doesn’t support transform-style: preserve-3d;
i have to flip each side seperately. It works well in recent browsers but there is no perspective in IE10.
If i write
perspective: 1000px;
in the container(.flipper), backface-visibility/z-index is not working correctly.

Have a look at tis jsfiddle:
http://jsfiddle.net/wG6gk/2/

Answer 1

I have no clue why you have xpersepective in your CSS, IE10 is unprefixed in CSS, however the perspective property must have some kind of unit for the depth, perspective: 1000 won’t be applied because the browser doesn’t know what unit it is in, similarly like width and height, etc, you have to apply px, em, etc. The only browsers that assume units (and in pixels) on the perspective property are Webkit browsers, and only when it is inside the transform property.

If you do a little research you, Microsoft states:

The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element’s transform to each of the child elements in addition to the child element’s normal transform.

So for now, you’ll just have to implement the advised fix, if you want to go down that road.

If not, you’re lucky. I spent time trying to make it transition smoothly over. Originally in your fiddle, you were transforming it very awkwardly and had too many styles, in my opinion, so the techniques in this JSfiddle should help: http://jsfiddle.net/NAy2r

---

Explained fiddle

So basically the front content exists in the container div, while the back content exists in the back div, which exists inside the container div. This is very similar to Apple’s HTML5 Card flip demo, however there is a twist when it comes to backface-visibility.

At the time that Apple relased that demo, backface-visibiity didn’t work on Chrome or Firefox. Chrome had some concept of perspective, but none of backface-visibility, so when you flipped an element, you’d still see through to the back and the content of the back would show through both sides as well; However on Safari, it’d be perfect because it initially understood these concepts.

In further updates of Chrome in the months afterwards, Chrome understood the property, however it was applied literally and the back was hidden completely, regardless if you flipped it or not! What would be the point of having this property if it was going to hide the back completely no matter what? You could just apply display:none, etc, to show the back if you wanted!!

And that is where IE stands as of today, it as well doesn’t recognize the ‘back’ of the element (an element with transform:rotateY(180deg) is considered to be the backside) like other modern browsers do. So when the element is flipped, backface-visibilty: hidden is taken literally as it was in Chrome!

So this fiddle listens on an AnimationStart event on the container div, and on the animation start, it finds the duration of the animation and it uses that to calculate halfway though the animation, so when the animation is halfway, it changes backface-visibility to visible, that way the animation smoothly transitions like it’s supposed to.

This was a pain to develop, IE10 is somewhat inconsistent, as it needs time to process it the first time (probably the jQuery). Notice the relief, lack of headache and fiery red eyes. The air around you has become cooler and you can finally breathe, because now you’re not alone.

Edit: I forgot to add, that if your animation or transition has a different timing, the timing in this script will have to be adjusted, as it only works with linear transitions, as of now…