Myujth

I am trying to implement flip animation. Here is the sample link: http://animista.net/play/basic/flip

and this is the class:

.flip-horizontal-bottom 
 -webkit-animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
 animation: flip-horizontal-bottom 0.4s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;



/**
 * ----------------------------------------
 * animation flip-horizontal-bottom
 * ----------------------------------------
 */
@-webkit-keyframes flip-horizontal-bottom 
 0% 
 -webkit-transform: rotateX(0);
 transform: rotateX(0);
 
 100% 
 -webkit-transform: rotateX(-180deg);
 transform: rotateX(-180deg);
 

@keyframes flip-horizontal-bottom 
 0% 
 -webkit-transform: rotateX(0);
 transform: rotateX(0);
 
 100% 
 -webkit-transform: rotateX(-180deg);
 transform: rotateX(-180deg);
 

It works fine in Chrome and Firefox but does not work at all in IE11. What changes would I require to make it work in IE 11?

From their "How to" notes:

Also, some of the animations are experimental and may not work as expected in older browsers no matter how you prefix them. Use your own judgement or better yet – consult the super-useful caniuse.com to check for browser support.

Besides, they don't provide the complete code as far as I can tell. They have a perspective:500px on their animation stage wrapper (in the demo) which makes it all work, and I don't see it mentioned anywhere in the download example code.

Even after you add it, I doubt it will work in IE, as it lacks support for transform-style:preserve-3d, as pointed out in the answers here.