Как визуально повернуть игральную CSS-карту?

Question

[acorn]

Acorn приветствует! Учу js, пишу игру концентрация. 18 пар карт случайно выбранные из колоды(52).
Не совсем понимаю, как сделать рубашку карты.
Сейчас пока такой вариант-костыль, что при клике изменяется style.zIndex,
но что-то мне подсказывает, что это говнокод(
https://codepen.io/acornTeam/pen/ypRKxN

Answer 1

[Kovalsky]

desandro: card flip

Answer 2

[Anton fon Faust]

Используйте position:absolute; transform:rotateY; и backface-visibility: hidden;
https://jsfiddle.net/anton4ept/9xoo08ew/

Answer 3

[Roman Fov]

Оно?
https://codepen.io/Roman-Fov/pen/hEluv