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

要使硬币落在特定的一侧，请在您提供给我们的同一个代码笔上执行以下操作。

Heads：将“var spinArray”行更改为

var spinArray = ['animation1080'];

Tails：将“var spinArray”行更改为

var spinArray = ['animation900'];

在无法访问您的代码的情况下，我无法继续下去。不过，这应该足以弄清楚。

希望这可以帮助。

最好的事物，

蒂姆