CSS3 "flip cards" not working in Internet Explorer

Question

I'm making some flipping cards, which work nicely in Chrome and Firefox, but Internet Explorer (v11) doesn't display the backfaces. I can't spot the flaw in my CSS - can anyone help?

You can see an example here

$(document).on("mouseenter mouseleave", ".flipme", function() {
  $(this).toggleClass("flipped");
});

$(document).on("click", ".roundSquare.notMarked", function() {
  $(".marked").addClass("flipme");
  $(".marked").removeClass("flipped");
  $(".roundSquare").removeClass("marked");
  $(".roundSquare").addClass("notMarked");
  $(this).removeClass("flipme");
  $(this).addClass("marked");
  $(this).removeClass("notMarked");
});

#roundSquareContainer {
  width: 49vw;
  height: 10vw;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  display: inline-block;
  position: relative;
  margin-bottom: 5vh;
}
.roundSquare {
  height: 10vw;
  width: 10vw;
  float: left;
  margin-right: 1vw;
  margin-left: 1vw;
  -webkit-perspective: 600;
  -moz-perspective: 600;
  -o-perspective: 600;
  perspective: 600;
}
.transitions {
  -webkit-transition: 0.6s;
  -moz-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}
.flipped {
  -webkit-transform: rotatey(-180deg);
  -moz-transform: rotatey(-180deg);
  -o-transform: rotatey(-180deg);
  transform: rotatey(-180deg);
}
.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 10vw;
  height: 10vw;
  cursor: pointer;
}
.front {
  z-index: 200;
  -webkit-transform: rotatey(0deg);
  -moz-transform: rotatey(0deg);
  -o-transform: rotatey(0deg);
  transform: rotateY(0deg);
  background-color: #CC5456;
}
.back {
  -webkit-transform: rotatey(180deg);
  -moz-transform: rotatey(180deg);
  -o-transform: rotatey(180deg);
  transform: rotateY(180deg);
  z-index: 199;
  background-color: rgba(255, 215, 168, 0.4);
}
.marked .back {
  background-color: #5CF907;
  cursor: default;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="roundSquareContainer">
  <div class="roundSquare transitions notMarked flipme">
    <div class="card">
      <div class="front">
      </div>
      <div class="back">
      </div>
    </div>
  </div>
  <div class="roundSquare transitions notMarked flipme">
    <div class="card">
      <div class="front">
      </div>
      <div class="back">
      </div>
    </div>
  </div>
  <div class="roundSquare transitions notMarked flipme">
    <div class="card">
      <div class="front">
      </div>
      <div class="back">
      </div>
    </div>
  </div>
  <div class="roundSquare transitions notMarked flipme">
    <div class="card">
      <div class="front">
      </div>
      <div class="back">
      </div>
    </div>
  </div>
</div>