CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

Question

After looking through IE10\'s developer blog I have found that they do not support the preserve-3d setting.

They do offer a workaround, but I can not seem to get it

Answer 1

As the OP notes, there is an answer to the question on their blog, but sadly he did not quote:

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

In summary, as normal, Microsoft's Browser is badly broken.

On further investigation, it seems that the interpolation engine is incomplete or broken in IE10; applying everything in terms of matrix transforms causes 'random' flips to occur when rotation about more than one axis is involved. The only method of matrix interpolation would be to manually handle all interpolation manually. Further, it seems that any interpolation where a right angle is involved will cause inconsistent 'random' flipping.

I have succeeded in interpolating the required css, however (minified), the code is thousands of lines long. So, yeah, IE can do 3d css, if you don't mind pre-compiling and long wait-times.