flip card using javascript and css

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div id="container">
      <button id="change">Change</button>
      <div id="cards-container">
        <div class="card">
          <span class="value">A</span>
        </div>
        <div class="card">
          <span class="value">2</span>
        </div>
        <div class="card">
          <span class="value">3</span>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </body>

</html>

var init = function() {
  var cards = document.querySelectorAll(".card");
  var flipCard = function(card) {
    card.classList.remove("trasition");
    card.classList.toggle("rotate");
    card.classList.add("trasition");
    card.classList.add("open");
    window.setTimeout(function() {
      card.classList.remove("trasition");
      card.classList.toggle("rotate");
      card.classList.add("trasition");
      card.classList.remove("open");
    }, 1300);
  };
  var handler = function(event) {
    flipCard(event.target);
  };
  var card;
  for (card of cards) {
    card.addEventListener("click", handler);
  }
  var changeHandler = function() {
    var number;
    for (card of cards) {
      number = Math.floor(Math.random() * 100 % 13) + 1;
      switch (number) {
        case 1:
          number = 'A';
          break;
        case 11:
          number = 'J';
          break;
        case 12:
          number = 'Q';
          break;
        case 13:
          number = 'K';
          break;
        default:
          break;
      }
      card.children[0].innerHTML = number;
      flipCard(card);
    }
  };
  document.querySelector("#change").addEventListener("click", changeHandler);
};
window.addEventListener("load", init)

/* Styles go here */
#container {
  width: 600px;
  height: 600px;
  background: cyan;
}
#cards-container {
  padding: 20px;
}
.card {
  margin: 10px;
  background: red;
  float: left;
  color: transparent;
}
.card .value {
  margin: 75px 50px;
  display: inline-block;
  -webkit-transform: rotate(180deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(180deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(180deg);  /* IE 9 */
        -o-transform: rotate(180deg);  /* Opera 10.50-12.00 */
         transform: rotateY(180deg);
}
.rotate {
  -webkit-transform: rotate(180deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(180deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(180deg);  /* IE 9 */
        -o-transform: rotate(180deg);  /* Opera 10.50-12.00 */
         transform: rotateY(180deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}
.trasition {
   -webkit-transition: all 1s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 1s ease-out;  /* Firefox 4-15 */
       -o-transition: all 1s ease-out;  /* Opera 10.50–12.00 */
          transition: all 1s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}
.anti-rotate {
  -webkit-transform: rotate(-180deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(-180deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(-180deg);  /* IE 9 */
        -o-transform: rotate(-180deg);  /* Opera 10.50-12.00 */
         transform: rotateY(-180deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
         
}
.open {
  color: black;
  background: rgb(0, 196, 255);
}
.open {
  color: black;
}
.clear {
  clear: both;
}