JavaScript硬币翻转动画，两侧带有自定义图像

Question

I'm currently developing a site in which 2 users go head to head in a "coin flip", a Materialize CSS modal pops up on each users screen (the winner has already been defined), I then want there to be a coin flip animation.

I'm going to use this coin flip animation: https://www.html5andbeyond.com/coin-flip-application-html-css-and-jquery/

My question is how can I set the coin flip to land on a specific winner before the animation, also, how can I change it so there's a custom image on each side?

Thanks,

James

Answer 1

Here are the changes to make in the css of that Codepen to place an image on either side of the coin. Click 'Edit on Codepen' on 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;
}

To make the coin fall on a specific side do the following on that same codepen you gave us.

Heads: Change the 'var spinArray' line to

var spinArray = ['animation1080'];

Tails: Change the 'var spinArray' line to

var spinArray = ['animation900'];

I can't take it any further without having access to your code. That should be enough to figure it out though.

Hope this helps.

Best,

Tim