CSS 3D animation not working correctly in IE11


This animation does not behave as I'd expect it to in IE11.

It should open like a book.

It was created in Google Web Designer (omitted large portions of the code for brevity).

JSFiddle (open in IE11)

However the following DOES work in Chrome (only difference is I've included the WebKit prefixes).

JSFiddle (open in Chrome)

Points of interest:

@keyframes mykeyframes {
      0% { transform: translate3d(0px, 0px, 2px); }
      100% { transform: matrix3d(-0.9998476952, 0, 0.0174524064, 0, 0, 1, 0, 0, -0.0174524064, 0, -0.9998476952, 0, 0, 0, 2, 1); }

Update Just noticed that if you don't animate it "fully" (so it only swings open part way) then it works fine in IE11 - http://jsfiddle.net/e45q5/3/

Update2 I believe it's related to this bug: https://groups.google.com/forum/#!newtopic/gwdbeta/gwdbeta/EOKnHw5qXmk

Problem courtesy of: Andrew Gee


I'm not able to debug a matrix3d value, but I can emulate the effect by editing your animation:

 @keyframes mykeyframes {
      0% { transform: rotateY(0deg); }
      100% { transform: rotateY(-180deg); }


Solution courtesy of: Mister Epic


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.