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

Question

我目前正在开发一个网站，其中 2 个用户在“抛硬币”中正面交锋，每个用户屏幕上都会弹出一个 Materialise 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'];

在无法访问您的代码的情况下，我无法继续进行下去。不过，这应该足以解决这个问题。

希望这对您有所帮助。

最好的，

蒂姆