How can I make this 3D transform work in IE 10?

Question

I am attempting to make a CSS 3D transform work in IE10. The problem is, IE10 does not support the preserve-3d property.

Microsoft CLAIMS there is a workaround. Their solution is the simply apply the transform(s) of the parent(s) to the child element(s). This however, does not work.

I've done copious amounts of searching to find a solution. There are a few accepted answers that supposedly make a 3D transform work. The problem is... they're REALLY simple animations like a card flip. To my knowledge, that wouldn't require preserve-3d in the first place.

Here is what I need to make work in IE10:

http://codepen.io/Joe_Temp/full/opFKu

Does anyone have any idea IF or HOW this can be accomplished?

Answer 1

Though I haven't tested it yet on IE, removing the transform-style: preserve-3d; property from a div with a card-flip transform in Chrome allows the flipping action still works, you just can't have a back-facing container. So basically, you could flip an image, and the image would appear backwards - but that's all you'd be able to do. Probably not what you want.

If you are willing to accept the use of javascript, then you have a much wider array of options. This resource discusses 10 different js plugins which all handle the flipping action a little differently:

http://www.sitepoint.com/10-jquery-flip-effect-plugins/

I have personally used flippy.js and it worked out pretty well. It is built to handle logic between card flips, and therefore ships with tons of callbacks that fire prior to the card flipping, in the middle, after it's done, etc. It is also better supported than the existing no-JS solution that you've come across.

Hope this helps.