Анимированная монетка (JS + CSS)

Привет. 

Для одного игрового проекта ищем аниматора, владеющего JavaScript'ом и имеющего отличное понимание CSS анимаций особенно в части 3Д трансформаций.

Чтобы быстрее понять, что мы хотим сделать, посмотрите эту анимацию – codepen.io/miklehazards/p...

Это – великолепный пэн, который мы будем адаптировать под наши нужды. Если вы можете так же и даже лучше, то идём дальше.

Нам нужна 3Д монетка, на которой по центру с каждой стороны по SVG иконке. Обе иконки разные (как орел и решка). Я приложил настоящий скрин нашего дизайна (fl_coin_empty.jpg), чтобы работать и анимировать не в вакууме. 

В определенном месте нашего дизайна (оно отмечено на fl_coin_inside.jpg как "монетка") должна располагаться наша монетка. Причем её стартовое положение может быть как с орла так и с решки (задается ч/з JS) и там же в переменной указывается выигрышная сторона. 

Задача исполнителя сделать анимацию этой монетки, такой что она подлетает в воздух, несколько раз вращается вокруг горизонтальной (возможно и вертикальной) осей. Подлетая, увеличиваясь в размерах (как бы это было в жизни), замедляясь (как вариант) в "верхней" своей точке и приземляется обратно. При этом она не должна быть плоской, а иметь объем(грань, см. пен выше) и по ней так же шикарно как в пене во время вращения должны переливаться градиенты. Так же в её вращение необходимо добавить рандома ( количество витков вокруг оси, врощение от/на себя, длительность анимации (+- секунда), углы поворота и т.п.), чтобы не было понятно по первой секунде вращения "ага, выпадет орел или решка". 

В идеале всё делаем прямо в кодпене поверх нашего дизайна (используем его как background).

Длительность анимации в пределах- 2-3 секунд.