Spinning coin

Only works once

HTML

<div class="coin" id="coin"></div>

CSS

body {
    -webkit-transform: perspective(500px);
    -webkit-transform-style: preserve-3d;
}
.coin {
    background-image: url("http://coins.thefuntimesguide.com/images/blogs/presidential-dollar-coin-reverse-statue-of-liberty-public-domain.png");
    background-size: 100% 100%;
    border-radius: 100%;
    height: 100px;
    margin: 50px auto;
    position: relative;
    width: 100px;
    -webkit-transition: 2s linear;
    -webkit-transform-style: preserve-3d;
}

JavaScript

var Coin = document.getElementById("coin");

Coin.onclick = function() {
	Coin.style.webkitTransform = "rotateY(1800deg)";
  Coin.style.MozTransform = "rotateY(1800deg)";
  Coin.style.msTransform = "rotateY(1800deg)";
  Coin.style.OTransform = "rotateY(1800deg)";
  Coin.style.transform = "rotateY(1800deg)";
}