Coin Flipper

Flip a Coin! CSS3, WebKit only!

by blue1086

HTML

<button onclick="window.coin.flip();">Flip!</button>
<div id="coin">
    <div id="heads">
        <img src="" />
    </div>
    <div id="tails">
        <img src="" />
    </div>
</div>

CSS

#coin {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.5s ease;
    width: 5em;
    height: 5em;
}
#heads {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position:absolute;
}
#coin * {
    width: 5em;
    height: 5em;
}
@-webkit-keyframes flip {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}
@keyframes flip {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}
.rotate {
    -webkit-animation: flip 0.6s infinite;
    animation: flip 0.6s infinite;
}
#tails {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position:absolute;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

JavaScript

(function ($) {
    var coin = {};
    coin = {
        images: {
            "heads": "https://www.random.org/coins/faces/60-usd/0001c/obverse.jpg",
                "tails": "https://www.random.org/coins/faces/60-usd/0001c/reverse.jpg"
        },
        limits: {
            "upper": 3,
            "lower": 1
        },
        load: function () {
            $("#heads>img").attr("src", coin.images["heads"]);
            $("#tails>img").attr("src", coin.images["tails"]);
        },
        speed: "600",
        flip: function () {
            $("#coin").addClass("rotate");
            setTimeout(function () {
                $("#coin").removeClass("rotate");
            }, (Math.floor(Math.random() * (coin.limits['upper'] - coin.limits['lower'])) + coin.limits['lower'])*1000);
        }
    };

    window.coin = coin;
}(jQuery));
coin.load();