Coin Flipper not working

i was bored, so i made a coin flipper thing, but I can't get it to work! i think the javascript thing works perfect, there is something wrong with the css stuff but I do not have any clue!

why is it not working?

here it is:

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

html, body {
        background: url("http://ift.tt/22Sq0QQ") 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://ift.tt/235pEmz');
  background-size: 100%;
  @include rotateY(0deg);
  z-index: 99;
}

.coinback {
  background-image: url('http://ift.tt/22Sq2rX');
  background-size: 100%;
  @include rotateY(0deg);
  z-index: 99;
}

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

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