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

Question

我目前正在开发一个网站，其中有2个用户在“硬币翻转”中并肩作战，每个用户屏幕上都会弹出一个Materialize CSS模式（已经确定了获胜者），然后我希望有一个硬币翻转动画。

我将使用此硬币翻转动画： https : //www.html5andbeyond.com/coin-flip-application-html-css-and-jquery/

我的问题是，如何在动画制作之前将硬币翻转设置为落在特定的获胜者身上，并且如何更改它，以便在每侧都有自定义图像？

谢谢，

詹姆士

Answer 1

这是在Codepen的CSS中进行的更改，以将图像放置在硬币的两侧。 点击https://codepen.io/html5andblog/pen/pJZpee上的“在Codepen上编辑”

#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;
}

为了使硬币落在特定的一面，请在您给我们的同一密码笔上执行以下操作。

头：将“ var spinArray”行更改为

var spinArray = ['animation1080'];

尾巴：将“ var spinArray”行更改为

var spinArray = ['animation900'];

如果无法访问您的代码，我将无法再进行进一步的开发。 那应该足以弄清楚它。

希望这可以帮助。

最好，

提姆