Transform in IE not working properly

Question

I edited a jsfiddle where you can flip a card.

It works fine in Chrome and Firefox but when you open it in IE it doesn't work properly...

.flip .card.flipped {
 -webkit-transform: rotatex(-180deg);
 -ms-transform: rotatex(-180deg);
}

The back of the card isn't shown in IE... What am I doing wrong?

Here's the fiddle: https://jsfiddle.net/MichaHumbel/asd17pb2/

Answer 1

http://caniuse.com/#feat=transforms3d

Partial support in IE refers to not supporting the transform-style: preserve-3d property. This prevents nesting 3D transformed elements.

Since you are using transform-style: preserve-3d property in your code, this is the issue.

EDIT:
Preserve 3d not working on ie11 similar problem, and they found solution. Hope it helps, you too.