硬币翻盖无法正常工作

Question

我很无聊，所以我做了一个硬币翻盖的东西，但我无法让它上​​班！ 我觉得javascript的东西很完美，css的东西有问题，但我没有任何线索！

为什么不起作用？

这里是：

＆＃13;

＆＃13;

// Buttons
var ButtonFlip = document.getElementById("btnFlip");
var ButtonReset = document.getElementById("btnreset");
var ButtonChange = document.getElementById("btnchange");

// Texts
var DisplayLastValue = document.getElementById("lastvalue");
var DisplayCounter = document.getElementById("countertext");

// Other Variables
var flipper = document.getElementById("flipper");
var Counter = 0;
var Degrees = 0;
var CoinValue = "Heads";

// Functions
ButtonFlip.onclick = function() {
	if (Counter >= 1) {
		Counter = Counter + 1;
		DisplayCounter.innerHTML = Counter;
		DisplayLastValue.innerHTML = CoinValue;
	} else {
		Counter = 1;
		DisplayCounter.innerHTML = Counter;
	}

	var Value = Math.random();

	console.log("Original value: " + Value);
		if (Value >= 0.5) {
			if (CoinValue == "Heads") {
			 	CoinValue = "Heads";
			  Degrees += 1800;
			  flipper.style.webkitTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.MozTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.msTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.OTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.transform = "rotateY(" + Degrees + "deg)";
			} else {
				CoinValue = "Tails";
			  Degrees += 1800;
			  flipper.style.webkitTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.MozTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.msTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.OTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.transform = "rotateY(" + Degrees + "deg)";
			}
		} else { // < 0.5
			if (CoinValue == "Heads") {
				CoinValue = "Tails";
			  Degrees += 1620;
			  flipper.style.webkitTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.MozTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.msTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.OTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.transform = "rotateY(" + Degrees + "deg)";
			} else if (CoinValue == "Tails")  {
			 	CoinValue = "Heads";
			  Degrees += 1620;
			  flipper.style.webkitTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.MozTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.msTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.OTransform = "rotateY(" + Degrees + "deg)";
			  flipper.style.transform = "rotateY(" + Degrees + "deg)";
			}
		}
		console.log(Degrees);
}

ButtonReset.onclick = function() {
	console.log("Reset!");
	Counter = 0;
	if (CoinValue == "Heads") {
	} else if (CoinValue == "Tails")  {
		Degrees += 180;
		flipper.style.webkitTransform = "rotateY(" + Degrees + "deg)";
		flipper.style.MozTransform = "rotateY(" + Degrees + "deg)";
		flipper.style.msTransform = "rotateY(" + Degrees + "deg)";
		flipper.style.OTransform = "rotateY(" + Degrees + "deg)";
		flipper.style.transform = "rotateY(" + Degrees + "deg)";
		CoinValue = "Heads";
	}
	DisplayCounter.innerHTML = "";
	DisplayLastValue.innerHTML = "";
	console.log(CoinValue);
	console.log(Degrees);
}

＆＃13;

html, body {
	background: url("https://googledrive.com/host/0B8o6WU--_6bocGJaOXpROEtzdGs") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
	color: white;
	font-weight: bold;
  text-align: center;
}

.flip-container {
	width: 250px;
	height: 250px;
  margin-left: auto;
  margin-right: auto;
}

.flipper {
	transition: 2s;
  -webkit-transition: 1.5s linear;
  -webkit-transform-style: preserve-3d;
}

.coinfront, .coinback {
	width: 250px;
	height: 250px;
  background-size: 100% 100%;
	border-radius: 100%;
	backface-visibility: hidden;
	position: absolute;
}

.coinfront {
  background-image: url('http://adrianspiegel.de/head.gif');
  background-size: 100%;
  @include rotateY(0deg);
  z-index: 99;
}

.coinback {
  background-image: url('http://adrianspiegel.de/tail.gif');
  background-size: 100%;
  @include rotateY(0deg);
  z-index: 99;
}

.buttons {
  border-radius: 20px; 
  height: 32px; 
  width: 64px;
}

＆＃13;

<div style="margin: 10px 10px 50px 10px;">
  <p>Number of flips: <b id="countertext"></b></p>
  <p>Previous value: <b id="lastvalue"></b></p>
  <div class="flip-container">
    <div class="flipper" id="flipper">
      <div class="coinfront" id="front">
      </div>
      <div class="coinback" id="back">
      </div>
    </div>
  </div>
  <br>
  <button id="btnFlip" class="buttons">
    Flip!
  </button>
  <button id="btnreset" class="buttons">
    Reset!
  </button>
</div>

＆＃13;

＆＃13;

＆＃13;