JavaScript-анимация с мозаикой с пользовательским изображением с обеих сторон

Question

В настоящее время я разрабатываю сайт, в котором 2 пользователя идут голова в голову в «фальш-монете», на каждом экране пользователя появляется всплывающее окно Materialize CSS (победитель уже был определен), я тогда хочу, чтобы была анимация с переводом монет.

Я собираюсь использовать эту монету покадровой анимации: https://www.html5andbeyond.com/coin-flip-application-html-css-and-jquery/

Мой вопрос, как я могу установить флип монету на землю на определенном победителя до анимации, также, как я могу изменить его так, что есть пользовательское изображение с каждой стороны?

Спасибо,

Джеймс

Answer 1

Вот изменения, чтобы сделать в CSS этого Codepen поместить изображение на обе стороны медали. Нажмите на кнопку «Редактировать на Codepen» на https://codepen.io/html5andblog/pen/pJZpee

#coin .front { 
    transform: translateZ(1px); 
    border-radius: 50%; 
    background-image: url('http://placehold.it/200x200/E8117F/000000'); 
    background-size: cover; 
    display: block; 
} 

    #coin .back { 
    transform: translateZ(-1px) rotateY(180deg); 
    border-radius: 50%; 
    background-image: url('http://placehold.it/200x200/000000/E8117F'); 
    background-size: cover; 
    display: block; 
} 

Для того, чтобы падение монеты на определенной стороне сделать следующее на том же codepen вы дали нам.

Heads: Измените строку 'вар spinArray' в

var spinArray = ['animation1080']; 

Хвосты: Изменить 'spinArray Var' строку

var spinArray = ['animation900']; 

Я не могу взять это дальше, не имея доступ к вашему коду. Этого должно быть достаточно, чтобы понять это.

Надеюсь, это поможет.

Беста,

Tim