Rotace "oboustranného" (rub/líc) obrázku

Zdravím,
potřeboval bych vytvořit animaci rotace dvou obrázků tak, aby to vypadalo, jako když se (kolem osy Y) otáčí karta, která má na rubu i líci jiný obrázek.
Na internetu jsem našel jeden pěkný vzor (codepen.io/pigner/pen/aWVdeM - obrázek vlevo), jenže to je animace závislá na přejetí myší (transition). Já jsem zkusil tento vzor předělat na @keyframes, ale jak je vidět na ukázce (vpravo na uvedeném odkazu), každý obrázek se otáčí jinou rychlostí, nesynchronně, takže to nedává požadovaný efekt. Prosím o radu, jak to upravit, jelikož si s tím nevím rady. Děkuji.

Tak to by mě fakt nenapadlo. Každopádně ještě jednou děkuju.

Omlouvám se předem, že sem píšu po tak dlouhé době, nicméně jsem až teď zjistil, že řešení nefunguje v IE 11 (jinde ano).
Zjistil jsem, že problém je v CSS vlastnosti backface-visibility, kterou sice IE 11 papírově podporuje, ale jen u nehybných obrázků; u rotujících nefunguje. (Příklady, které IE 11 nezobrazí správně: tympanus.net/codrops/css_reference/backface-visibility (Live Demo), css-tricks.com/almanac/properties/b/backface-visibility (nadpis Works properly), www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_backfacevisibility (po odškrtnutí zatržítka).)
Nevím, zda se s tím dá něco udělat, aby Keehiho řešení mého původního dotazu plně fungovalo i v IE 11, ale spokojil bych se i s tím, že by v IE 11 na rozdíl od ostatních prohlížečů rotoval aspoň (z pohledu návštěvníka) horní obrázek při jinak stejném kódu. Nevím však, jaká pravidla přidat speciálně jen pro tento prohlížeč (podmíněné komentáře IE od verze 10 už nepodporuje).

Keeehi:
No, jen IE 11 + ostatní prohlížeče v posledních verzích (u nich jsem na problém nenarazil a jejich starší verze snad už nikdo nepoužívá).