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: /

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

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./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

• javascript
• jquery
• html
• css
• animation

• @OlivierDeMeulder There's no "relevant code", this question is on the functionality and execution of displaying a coin flip animation with a pre-defined coin side – iJamesPHP Commented Mar 10, 2016 at 15:07
• @iJamesPHP Not certain what Question is ? – guest271314 Commented Mar 10, 2016 at 15:10
• @guest271314 ok let me edit the question to something more easy – iJamesPHP Commented Mar 10, 2016 at 15:11
• 1 @iJamesPHP What have you tried ? Can you include html, css attempts to resolve issues at Question ? – guest271314 Commented Mar 10, 2016 at 15:14

1 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