How can I create a cross-browser pure CSS flip ani

问题:

So I've created a CSS flip animation. My problem is, that it looks totally different in latest browsers of Chrome, FF, and IE. How should I modify the css, to work perfectly in these modern browsers? Thanks!

Here is the working example:

jsfiddle